div分层

示意图如下：

div分层.png

CSS分层2.png

在浮动元素里添加文字，这些文字依然会被标准流的文字所盖住

position属性

static

此属性为默认属性，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此属性中top,bottom,right,left与z-index均无效。

relative

相对定位，元素所占空间不变，但显示的空间可以改变，如图：

相对定位.png

用法
1. 用于做位移(很少使用)
2. 用于做absolute元素的祖先级元素

absolute

绝对定位，元素会被移出正常文档流，并不为元素预留空间，一般使用absolute时，要在其祖先级元素加上relative定位

用法
1. 脱离元素原来的位置，另起一层，比如制作对话框的关闭按钮
2. 鼠标提示（鼠标移动到按钮上显示提示内容）

鼠标提示内容.png

absolute用法示例

经验总结：

absolute是相对于祖先元素中最近的一个定位元素来定位的
- 定位元素：position不是static的元素，就是定位元素
某些浏览器不写top/left/bottom/right 会位置错乱
运用时应善用left:100%
善用left:50%与负margin (这种方法同样能实现示例中提示内容居中显示在按钮上方)
显示hover的内容：开发者工具→:hov→:hover 勾选
white-space:nowrap; 文字内容不准换行

fixed

固定定位，元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
视口（viewport）：网页能给用户看到的区域

用法

烦人的广告
回到顶部按钮

fixed用法示例

注意：手机上尽量不要用这个属性，bug很多

sticky

粘性定位：允许相对于文档上的任何内容定位元素，一旦用户滚动超过视口中的某个点，元素便会固定到该位置，使其像fixed元素一样持续显示。

sticky用法示例

注意：此定位目前浏览器的兼用程度还不是很高

参考：
position-MDN
position丨CSS-Tricks

层叠上下文

层叠上下文如图所示：

层叠上下文.png

Z-index

z-index属性设定了一个定位元素及其后代元素或flex项目的z-order。当元素之间重叠的时候， z-index较大的元素会覆盖较小的元素在上层进行显示。

z-index:auto 默认值，不会创建新的层叠上下文
z-index:0/1/2/…或z-index:-1/-2/…大数会压在小数上方，会创建一个新层叠上下文

如图：当灰色值大于黑色：

灰大于黑.png

当黑色值大于灰色：

黑大于灰.png

但是实际情况往往更加复杂，z-index:10 和 z-index:5 哪个高？
答案是视情况而定，原因如下

比喻

每个层叠上下文就是一个新的小区域
这个小区域里的z-index跟外界无关
处于同一个小区域里的z-index才能比较示例：层叠上下文示例

层叠上下文示例.png

此例中，a1（z-index=10）在a（z-index=1）里，所以是a与b（z-index=5）进行比较，a1无法与b直接比较，故b可以把a1压住

总结：

哪些不正交的属性可以创建层叠上下文→层叠上下文-MDN
需要记住的情况：
1. z-index取值为0时
2. position:flex/sticky
3. opacity取值小于1时
4. transform
opacity和background的区别？
- opacity:不仅影响其本身，还会影响其里面的元素
- background:仅仅只是改变背景色
z-index为负数不一定能逃出一个div，除非这个div不是一个层叠上下文

CSS分层 笔记