CSS学习笔记之position属性

网页显示:

  我们发现,属性值为fixed的子标签并不受具有position属性的父标签影响,脱离了来父标签的约束,仍然显示在top:0px; left:0px;位置.

而属性值为absolute的子标签却受着具有position属性的父标签约束,显示在父标签的区域内,这也是fixed与absolute的一个重要区别

但我们还是可以认为,属性值为absolute的子标签也显示在了top:0px; left:0px;位置.只不过它是相对于父标签进行定位的

  5.inherit:继承

• 从父标签继承position属性值

 举个栗子:

对于父div标签我们设置position:fixed,对于子div标签我们设置position:inherit,观察子标签是否会继承父标签的position属性值 /*{margin:0px;padding:0px; }.pre{width:200px;height:200px;border:1px solid black;position:fixed;top:100px;left:100px; }.inherit{width:100px;height:100px;border:1px solid red;position:inherit;top:0px;left:0px; }

  浏览器显示:

我们发现,子标签具有和父标签同样的position属性值---fixed,子标签的fixed使它显示在了相对于浏览器窗口进行定位的top:0px; left:0px;位置

 三、总结与补充

1.关于relative的补充

• 通过上面介绍发现relative并未使元素脱离正常的标准流,因此元素仍受标准流的约束(包括其它元素以及自身的外边距和内边距)
• 而脱离了标准流(具有absolute,fixed属性值)的元素,则不受标准流的约束,不受其它元素内外边距的约束,但自身的内外边距会对自身产生约束
• 无论相对定位元素定位在哪里，它都一直占有原来位置上的文档流，而绝对定位元素真正的脱离了文档流，不再占用原来的位置

 关于前两点举个栗子

给body标签设置内边距和外边距,观察相对定位元素和绝对定位元素的显示情况 body{margin:10px;padding:10px; }.relative{width:100px;height:100px;border:1px solid red;position:relative;top:0px;left:0px; }.absolute{width:100px;height:100px;border:1px solid black;position:absolute;top:0px;left:0px; }

网页显示:

我们发现元素:

关于第三点再举个栗子

  我们将中间的div设置为relative /*{margin:0px;padding:0px; }.yellow{width:100px;height:100px;background-color:yellow; }.relative_red{width:100px;height:100px;background-color:red;position:relative;left:200px; }.black{width:100px;height:100px;background-color:black; }

  网页显示：

为了对比，我们将中间div的relative改为absolute：

/*{margin:0px;padding:0px; }.yellow{width:100px;height:100px;background-color:yellow; }.absolute_red{width:100px;height:100px;background-color:red;position:absolute;left:200px; }.black{width:100px;height:100px;background-color:black; } 点击查看修改之后的代码

  网页显示：

我们发现，设置position:relative的div在原来的文档流上，仍然占有空间，而设置position:absolute的div在文档流上不再占有空间

2.关于绝对定位元素的补充

• 使用position属性生成绝对定位元素后（position值为 absolute 或 fixed），该元素同时也会变成一个块状元素，无论它之前是什么类型

栗如：

未设置position的标签

 尽管给它加了width和height属性，但它还是作为内联元素，width和height属性无效，所以网页显示空白

添加position:absolute生成绝对定位元素之后

标签同时变成了块状元素

3.top,right,left,bottom属性

• top属性值是指,将元素定位到距离相对位置顶端的距离
• right属性值是指,定位到距离相对位置右端的距离
• left属性值是指,定位到距离相对位置左端的距离
• bottom属性值是指,定位到距离相对位置底端的距离
• 属性值都可为负数,表示朝反方向定位

4.z-index属性

因为先写的定位元素会被后写的定位元素覆盖,因此我们需要设置定位元素的堆叠顺序,是其按照我们想要的覆盖方式进行显示

• z-index属性用来设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
• z-index属性仅能在具有定位属性的元素上奏效
• 当z-index为负值时该元素会被标准流中的元素覆盖

举个大栗子: /*{margin:0px;padding:0px; }.red{width:100px;height:100px;background-color:red;position:absolute;top:0px;left:0px;z-index:5; }.black{width:100px;height:100px;background-color:black;position:absolute;top:0px;left:0px;z-index:3; }.blue{width:100px;height:100px;background-color:blue;position:absolute;top:0px;right:0px;z-index:-1; }.no-position-yellow{width:1500px;height:1000px;background-color:yellow; }

  网页显示:

我们可以看到只有背景为红色和黄色的元素显示了,并且红色元素堆叠在黄色元素上方,因为黑色元素的z-index小于红色元素的z-index,而它们位置相同,因此红色元素将黑色元素完全覆盖了.

对于蓝色元素,因为他的z-index为负数,所以它直接被标准流中的黄色元素覆盖.

四、最后

我理解浅薄，如有错误或不足之处还请留言指出，十分感谢！