CSS 四种定位方式总结

CSS学习自检

---

什么是定位？

定位：是将盒子定在某一个位置。
定位 = 定位模式 + 边偏移 。
定位模式决定元素的定位方式，边偏移则决定了该元素的最终位置。

定位模式与边偏移

  选择器 {
   position: sticky ; 
   top: 10px; 
   }

定位模式

定位模式是通过 CSS 的 position 属性来设置，其值可以分为以下几类：

属性		说明
static	静态定位	是元素的默认定位方式，按照标准流特性摆放位置，它没有边偏移
relative	相对定位	是相对于自己原来的位置来移动的，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。没有脱标。
absolute	绝对定位	是相对于它的祖先元素来进行移动的；如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位;如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。绝对定位不再占有原先的位置，是脱离标准流的。
fixed	固定定位	是元素固定于浏览器可视区的位置。 跟父元素没有任何关系；不随滚动条滚动；是脱离标准流的。
sticky	粘性定位	是相对定位和固定定位的混合。以浏览器的可视窗口为参照点移动元素（固定定位特点）；占有原先的位置（相对定位特点）；必须添加 top 、left、right、bottom 其中一个才有效；跟页面滚动搭配使用。

边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

边偏移属性	示例	描述
top	top：50px；	顶端偏移量，相对于其父元素上边线的距离。
bottom	bottom：50px；	底部偏移量，相对于其父元素下边线的距离。
left	left：50px；	左侧偏移量，相对于其父元素左边线的距离。
right	right：50px；	右侧偏移量，相对于其父元素右边线的距离。

关于子绝父相

子绝父相是定位中最常用的一种方式，意思是：子级是绝对定位的话，父级要用相对定位。具体解释如下：

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

所以相对定位经常用来作为绝对定位的父级。

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

待续。