各元素的层级关系

从上到下依次为

1. 内联子元素
2. 浮动元素
3. 块级子元素
4. border
5. background

文字内容的层级后出现的较高。

position 定位

position: static; 默认值。
position: absolute; 绝对定位。
position: relative; 相对定位。
position: fixed; 固定定位，相对于视口，手机上尽量不要用。
position: sticky; 粘性定位，兼容性差。

z-index默认是 auto，谁的数值大。谁在上面。

white-space: nowrap; 文字内容不准换行。

absolute 会相对最近的非 static 祖先元素定位。

z-index: auto; 不创建层叠上下文。
z-index: 0; 会创建层叠上下。

opacity 会影响整个元素。
background: rgba 只会影响背景。

创建层叠上下文

1. z-index: 0;
2. position: fixed;
3. opacity 不为 1
4. transform 不为 null

详情阅读MDN文档

资料来源：饥人谷，MDN