CSS中的遮挡和覆盖/伪元素 :after-CFANZ编程社区

CSS中的遮挡和覆盖

z-index

z-index属性用于控制元素的堆叠顺序，默认值为auto，z-index只对定位元素（position: relative, position: absolute, position: fixed）有效，也就是说，z-index发挥效果的前提是设置了position。

position: relative：
- 相对于其正常位置进行定位
- 仍然占据原来的空间（即不会脱离文档流）
position: absolute：
- 相对于最近的已定位祖先元素进行定位（如果没有已定位的祖先元素，则相对于初始包含块，通常是<html>元素）
- 脱离文档流，不占据原来的空间 position: fixed：
- 相对于浏览器窗口进行定位
- 脱离文档流，不占据原来的空间
- 在页面滚动时，元素位置不变

overflow: hidden;

overflow: hidden; 属性用于指定如果内容溢出元素框（即内容超出了元素设定的尺寸），那么溢出的内容将被剪切，并且不会显示在元素框之外。
结合 overflow-x 或 overflow-y，可以创建水平或垂直滑动区域，允许用户通过滚动查看隐藏的内容。

伪元素

:after

伪元素 :after 可以用来添加一些装饰性的内容，比如边框、图标或者背景图案，而不需要改变 .content 元素的实际HTML结构。

避免干扰布局： 直接在 .content 上添加样式可能会影响其内部的布局，特别是如果你需要设置 position: fixed 或 position: absolute。使用 :after 可以避免这种情况，因为它是一个独立的层，不会影响 .content 的布局。
实现复杂的样式： 有时候，你可能需要实现一些复杂的样式，比如清除浮动、创建一个三角形或者添加一个阴影效果。这些都可以通过 :after 来实现，而不需要在 .content 上添加额外的样式。