十一.网页布局-CSS定位-一一网

position 属性用来指定一个元素在网页上的位置，一共有 5 种定位方式，即 position 属性主要有五个值。

static 是 position 属性的默认值。如果省略 position 属性，浏览器就认为该元素是 static 定位。
这时浏览器会按照源码的顺序，决定每个元素的位置，这称为”正常的页面流”（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效;

相对定位就是相对于自己以前在标准流中的位置（即 static 时的位置）来移动；它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离；

注意点:

由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置 margin/padding 等属性的时会影响到标准流的布局

应用场景：

绝对定位元素的容纳快是position属性值不为static的最近的祖辈元素，如果都没有，就是相对于 body。

注意点：

规律:

1.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点;
2.如果一个绝对定位的元素是以 body 作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点;
3.一个绝对定位的元素会忽略祖先元素的 padding;
4.默认情况下绝对定位的元素会以 body 作为参考点, 所以会随着浏览器的宽度高度的变化而变化

**如何让绝对定位的元素水平居中？**
只需要设置绝对定位元素的 left:50%;
然后再设置绝对定位元素的 margin-left: -元素宽度的一半 px;

注意点:

固定定位的元素是脱离标准流的, 不会占用标准流中的空间，所以也不区分行内/块级/行内块级。

元素可以被固定于页面指定位置，但并不一定始终固定于此位置。
定位位置可以通过 top、bottom、left 与 right 属性设置，但是此位置是一个临界值，也就是说元素只有达到设置的这个临界值才会固定，其他位置并不会固定。
跟前面四个属性值都不一样，它会产生动态固定效果，很像 relative 和 fixed 的结合：一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。
sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生”动态固定”的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛。它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效门槛，relative 定位自动切换为 fixed 定位；等到父元素完全脱离视口时（即完全不可见），fixed 定位自动切换回 relative 定位；
页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed 定位）；等到页面重新向上滚动回到原位，工具栏也会回到默认位置。