Css定位属性

在逆战班学习三周了，这周接触到了css的定位属性。

Css的定位属性的属性名是position，它有5个属性值，分别是static(默认值)，relative(相对定位)，absolute(绝对定位)，fixed(固定定位)和sticky(粘性定位)。

1.默认值 static：没有定位 或者 是取消前面给元素设定的定位属性，使其没有定位。

2.相对定位 relative：相对定位的参照物是元素自身。

特点： ①通过设置left,right,top,bottom值使元素进行偏移

②如果没有偏移量，该元素是不动的，没有任何影响

③不会使元素脱离文档流，若有偏移，该元素的原有位置也会保留，不会影 响其他元素的布局

.box2 {background: skyblue;position: relative;left: 50px;top: 50px;}

3.绝对定位 absolute：绝对定位的参照物是最近的具有定位元素的父辈元素(包含块)， 若父辈元素们都没有定位属性，则相对整个文档进行定位。

特点：①使元素完全脱离文档流

②使内联元素支持宽高

③使块状元素默认宽度根据内容决定

④相对具有定位属性的父元素偏移，若多个祖先都有定位，则相对最近的父元素

#wrap{width: 400px;height: 300px;margin: 30px auto;background: #f5f5f5;position: relative;}

.box2 {background: skyblue;position: absolute;left: 100px;top: 150px;}


补 若多个同辈元素都设置绝对定位属性，那么最后写的对象会显示在最上层，此时若想将第一个元素显示在最上层，需要添加 z-index:number; 设置的数值越大，层越靠上。

4.固定定位 fixed: 参照物是浏览器窗口

​ 特点：①使元素完全脱离文档流

②使内联元素支持宽高

③使块状元素默认宽度根据内容决定

④相对于整个浏览器窗口进行偏移，不受滚动条影响，不受祖先元素的影响

.box2 {background: skyblue;position: fixed;left: 200px;top: 150px;}

5.粘性定位 sticky:
特点：在元素没有到达指定位置时，是没有显示效果的，达到指定位置是，就会变成固定定位

​