一、深度讲解css定位position
(一)absolute生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。祖上元素都没定位就相对第一个即最外层的祖先元素进行定位,如果有祖上元素设置了position:relative、absolute、fixed就相对此祖上元素定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
(二)fixed:生成固定定位的元素,相对于浏览器窗口进行定位。
(三)relative:生成相对定位的元素,相对于自身正常位置进行定位。
(四)static:默认值。没有定位,元素出现在正常的流中。
(五)inherit:规定应该从父元素继承 position 属性的值(这种情况一般可忽略)。
Example1:相对定位,相对于自身定位。
代码:
效果图:红色框框就是child自身的位置,然后相对自身移动50px。
Example2:绝对定位;由于o3的父级没有设置position,因此相对于最外层元素进行定位。
示例图:
由于浏览器都有默认的margin/padding,导致如上图,需要对默认浏览器margin/padding进行处理如下图所示:
之后得到示例图如下图所示:
对于上图,假设有疑问到底是对最外层定位还是对第一个父级(蓝色框)进行定位呢?我们可以做一个实验,把蓝色框框进行移动,假设绿色框不动,那证明就是相对最外层元素进行定位。如下图所示,
对o1进行设置:
示例图如下,可见并没有随之移动!
Example3:绝对定位;由于o2的父级没有设置position,因此相对于父级进行定位,会随着父级o2位置的移动而移动。
代码如下:
示例图: