CSS定位布局

静态定位

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

相对定位

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

position:relative; 使用top,right,bottom.left来控制

注意点 1.相对定位不是脱离标准流的，会继续在标准流中占用一份空间

2.在相对定位中同一个方向上的定位属性只能使用一个

3.由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素

4由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以给相对定位的元素设置margin/padding等属性时会影响到标准流的布局

相对定位应用场景

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

绝对定位（就是相对于body来定位）position：absolute；

绝对定位参考点

1.规律

默认情况下所有的绝对定位的元素，无论有没有祖先元素，都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

2.1只要是这个绝对定位元素的祖先元素都可以

2.2指的定位流是指绝对定位/相对定位/固定定位

2.3定位流中只有静态定位不行

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

注意点

1.绝对定位的元素是脱离标准流的

2.绝对定位的元素不区分块级/行内/行内块级元素

3.如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点

4.一个绝对定位的元素会忽略祖先元素的padding

绝对定位-子绝父相

相对定位的弊端：不会脱离标准流，会继续在标准流中占用一份空间，不利于布局界面

绝对定位的弊端：默认情况下以body作为参考点，所以会随着浏览器的宽度高度变化而变化

子绝父相：子元素用绝对定位，父元素用相对定位

绝对定位水平居中

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

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

固定定位

position:fixed;固定定位可以让某个盒子不随着滚动条的滚动而滚动，与背景关联方式很像。

注意点：1.是脱离标准流的，不占用标准流中的空间

2.不区分行内/块级/行内块级

粘滞定位

position：sticky  结合了相对定位和固定定位两种功能于一体的特殊定位，适用于一些特殊场景

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

设置了粘滞定位的元素并不脱离文档流，仍然保留元素原本在文档流中的位置

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置

使用条件：

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

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

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

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

z-index

默认情况下所有的元素都有一个默认的z-index属性，取值是0，z-index属性的作用是专门用于控制定位流元素的覆盖关系的

默认情况下定位流的元素会盖住标准流的元素

默认情况下定位流的元素后面编写的会盖住前面编写的

如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就会显示在上面

注意点

从父现象 如果两个元素的父元素都没有设置z-index属性，谁的z-index属性大谁就显示在上面

如果两个元素的父元素都设置了，那么子元素的z-index属性就会失效，父元素大的z-index属性大的显示在上面