一、相对定位 relative
1.参照物为自身;
2.相对定位只改变显示的位置,而不会改变占用的空间位置;
3.关于距离的正负值
二、绝对定位 absolute
1.参照物为具有定位属性的父元素。
PS:如果距离当前最近的父元素不具有定位属性,则会一层一层向外找,直到找到具有定位属性(这里仅要求三种定位属性任一都可)的父元素而进行定位,如果找到最后未能找到具有定位属性的父元素,de则最终会依照body进行定位。
2.绝对定位不仅会改变显示的位置,而且会改变占用的空间位置。就好比是元素处于一种悬空漂浮的状态,没有“肉体”!
3.关于距离的正负值,和上面的相对定位的性质一样。
三、固定定位 fixed
固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化;
固定定位的位置是 相对当前浏览器窗口 的;
在一般的前端开发中比较常用的定位有三种:相对定位,绝对定位,固定定位。下面简要的说明一下他们的使用特点:相对定位position:relative1.它可以在四个方向分别或者同时进行偏移 2.定义时它的参照物是父元素(没有时为浏览器本身) 3.偏移后元素的原来位置还是被占着,并没有空出来 4.当父元素和子元素同时定义时,他们的参照物是父元素,且占据原来的位置 绝对定位position:absolute1. 它可以在四个方向分别或者同时进行偏移 2.单独定义时它的参照物是浏览器本身,且不占据原来的位置 3.当父元素和子元素同时定义时,他们的参照物是父元素,且不占据原来的位置 4.当子元素绝对定位,父元素相对定位时,他们的参照物是父元素,且还占据原来的位置 5.当子元素相对定位,父元素绝对定位时,他们的参照物是父元素,且不占据原来的位置 固定定位position:fixed 1.它可以在四个方向分别或者同时进行偏移 2.定义时它总是以浏览器为参照物,且不占据原来的位置 3.它不会随着浏览器的滚动而移动,即会固定在所能到观察浏览器界面的固定地方 注:普遍使用方式为子绝父相,即子元素绝对定位,父元素相对定位 可以使用z-index: 来进行优先级显示1、绝对定位
绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。
绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素作为参考值,则相对于整个网页。
2、相对定位
position:relative;
相对定位与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置,也仍然从原始的起点处占据空间。
3、固定定位
position:fixed;
固定定位永远都会相对于浏览器窗口进行定位,固定定位会固定在浏览器的某个位置,不会随滚动条滚动。最常用的就是电脑里面是不是弹出的小广告,如果你不差掉它,当时滑动鼠标查看网页时,小广告一直会在那里,还有常用的就是网站或者APP的导航栏和底部的选择栏。
原文地址:https://www.cnblogs.com/czy18227988114/p/11568586.html
作者:cz11