CSS布局之定位布局

---

前言

今天来讲一下css中的定位布局，分为静态(static)，相对(relative)，绝对(absolute)，固定(fixed)，粘滞(sticky)布局以及z-index

---

一、position: static;(静态布局)

HTML元素默认的定位是静态，默认定位在文档流中，设置position: static;样式的元素不会受到left，right，bottom，top的影响。它不会因为任何特殊的定位方法而改变其在正常流中的位置

二、position: relative;(相对定位)

相对定位是元素相对于其在原来标准流中位置进行移动，通过left，right，bottom，top属性进行调整

注意点：

1.设置了相对定位的元素是不脱离文档流的，也就是说他是区分行内元素/块级元素/行内块元素
2.因为他不脱离文档流，那我们就可以他添加magin和padding
3.在同一方向上只能设置一个属性，即left，right选择一个属性设置，设置了top就不能设置bottom

使用场景：

1.结合绝对定位使用
2.对元素进行微调

三、position: absolute;(绝对定位)

绝对定位的参考点

1.默认情况下，无论有位祖先元素，都是以body作为参考点。
2.但是，当祖先元素中有定位流元素(使用了绝对/相对/固定定位)，那么该元素就是参考点
3.如果其祖先元素中含有多个定位流元素，则选择最近的定位流元素作为参考点

注意点

1.绝对定位的元素是脱离文档流的
2.因为他脱离文档流，那么他就不区分分行内元素/块级元素/行内块元素
3.绝对定位的元素是会忽略其祖先元素的padding

四、position: fixed;(固定定位)

设置了固定定位的元素是相对于视口定位的，也就是说其不会随着滚动条的滚动而滚动，他始终处于以一个视口的位置，通过left，right，bottom，top属性调整其位置

注意点

1.固定定位的元素是脱离文档流的
2.和绝对定位一样，不区分区分行内元素/块级元素/行内块元素

五、position: sticky;(粘滞定位)

此定位结合了相对定位和固定定位，通过相对定位定位到某一位置，当视口到达此位置时，将其固定住，例如：设置top:50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动（此时相当于fixed定位）。

注意点

1.粘滞定位的元素是不脱离文档流的
2.设置 position: sticky; 同时给一个（left，right，bottom，top） 之一即可

使用条件

1.父元素不能overflow:hidden或者overflow:auto属性。
2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3.父元素的高度不能低于sticky元素的高度
4.sticky元素仅在其父元素内生效

六、z-index

使元素浮起来，脱离文档流。默认情况下所有元素的z-index的值都为0，z-index专门用于控制定位流 的覆盖关系，也就是说他只在定位流(使用了绝对/相对/固定定位)里才会生效

注意点

1.当两个父元素都没设置z-index时，子元素的z-index谁大谁在上
2.当两个父元素都设置z-index时,子元素的z-index失效，看父元素的z-index谁大谁在上

---