css定位布局

1.定位流分类

1.1 静态定位

是所有的元素的默认定位方式，将一个元素定位在默认文档流中

position:static;

1.2 相对定位

相对定位就是相对于自己以前在标准流的位置来移动

position: relative;   

通过top right bottom left 来设置位置

设置相对定位时，元素还在标准流中，会继续在标准流占据一份空间，一个方向上的定位属性只能用一个，一般配合绝对定位来使用。

1.3 绝对定位

绝对定位就是相对于body来定位，该元素就脱离标准流了

position: absolute;

通过top right bottom left 来设置位置

如果⼀个绝对定位的元素有祖先元素 , 并且祖先元素也是定位流 , 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。 ⼀个绝对定位的元素会忽略祖先元素的 padding

子绝父相 ： 相对定位不会脱离标准流 , 会继续在标准流中占用⼀份空间 , 所以不利于布局界面， 下绝对定位的元素会以 body 作为参考点 , 所以会随着浏览器的宽度高度的变化而变化，子元素用绝对定位 , 父元素用相对定位

绝对定位水平居中：

只需要设置绝对定位元素的 left:50%;

然后再设置绝对定位元素的 margin-left: - 元素宽度的⼀半 px;

1.4 固定定位

position: fixed;

固定定位的元素是脱离标准流的 , 不会占用标准流中的空间

1.5  粘滞定位

position: sticky;

不脱离文档流

设置 position:sticky 同时给⼀个 (top,bottom,right,left) 之⼀ 即可

使用条件：

父元素不能 overflow:hidden 或者 overflow:auto 属性。

必须指定 top 、 bottom 、 left 、 right4 个值之一，否则只会处于相对定位

父元素的高度不能低于 sticky 元素的高度

sticky 元素仅在其父元素内生效

1.6   z-index

默认情况下所有的元素都有⼀个默认的 z-index 属性 , 取值是0.z-index属性的作用是专门用于控制定位流元素的覆盖关系的。 默认情况下定位流的元素会盖住标准流的元素， 定位流的元素后面编写的会盖住前面编写的， 如果定位流的元素设置了 z-index 属性 , 那么谁的 z-index 属性比较大 , 谁 就会显示在上面

从父现象：若父元素设置了则按照父元素设置的来进行覆盖

 

                  若父元素和子元素都设置了，则子元素设置会失效，遵循父元素