CSS定位知识总结

我的CSS苦逼学习日记(5)

定位分为：静态定位 相对定位 绝对定位 固定定位 黏性定位

---

.静态定位**
静态定位是浏览器默认的定位方式，当一个元素未给position时，其定位方式默认为position:static ，无须记住，只需要了解即可

---

相对定位：
相对定位是在以元素原来位置为基础的移动，是相对于他原来的位置。原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置），因此，相对定位没有脱标，他最典型的应用是给绝对定位当父盒子。

绝对定位：绝对定位是在元素移动的时候，是相对于它的祖元素来说的“
语法：
选择器{
position:absolute;
}
绝对定位的特点：
1.如果没有祖元素或者祖元素没有定位的时候，则以浏览器为准定位（Document）
2.如果祖元素有定位（相对，绝对，固定），则以最近以及的有定位的祖元素为参考点移动位置
3.绝对元素是脱标的，人走茶凉，不保留原来的位置

子绝父相：
1.子级绝对定位，不会占有原来的位置，可以放到父盒子里面的任何一个地方，不会影响到其他兄弟盒子
2.父盒子需要加定位限制盒子在父盒子内显示
3.父盒子布局时，需要占有位置，因此父盒子只能是相对定位

总结：
因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位，当然子绝父相不是绝对永远不变的，如果父元素不需要占有位置的时候，子绝父绝也会遇到。

---

固定定位：
固定定位看名字自然想到位置不变的定位，没错，就是这样，设置了固定定位的它不会再变换自己的位置。
固定定位是元素固定于浏览器可视区的位置。主要使用的场景：可以在浏览器页面滚动时元素的位置不会改变。
选择器 {
position:fixed;
}
固定定位的特点：（记住）
1.以浏览器的可视窗口为参照点移动元素。
2.跟父元素没有任何关系
3.固定定位不再占有原先位置
4.固定定位不再占有原先位置
5.固定定位也是脱标的，其实固定定位也可以看做是一种特俗的绝对定位。

---

黏性定位:

黏性定位可以看做是相对定位和固定定位的混合，
语法：
选择器 {
position:sticky:
top:10px;
}

粘性定位特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原来的位置（相对定位的特点）
3.必须加top，left，right，bottom其中一个才有效