css中absolute定位原理

2019独角兽企业重金招聘Python工程师标准>>>

position的四个值：static、relative、absolute、fixed。

绝对定位：absolute和fixed统称为绝对定位

相对定位：relative

默认值：static

绝对定位的定位原理：

1.在父元素没有设置相对定位或绝对定位的时候，元素相对于根元素html元素进行绝对定位。

这里我们设置3个div，第3个div设置为绝对定位。并设置偏移量

运行结果：

 

由运行结果，可以看出div3悬浮在页面上。左侧偏移量为100px，顶部偏移量为30px。这里div3的父元素body没有设置相对定位或者绝对定位，所以此时div3是根据根元素html来定位的。

2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置相对定位或绝对定位的父元素进行定位。这里离自己最近的父元素

定位不是默认的static。

此时我们设置div3的父元素body为绝对定位

 

运行结果：

 

为了进一步理解第2句话，我们来设置这3个div分别设置父元素。

Html代码如下：

 

运行结果为

 

div3会按照与他最近的父元素container2进行绝对定位。

注意：

子元素是绝对定位，父元素就要设置为相对定位（子绝父相）

转载于:https://my.oschina.net/u/2971691/blog/876415