CSS div 覆盖 div

在 CSS 中，如果一个 div 完全包含另一个 div，那么通常情况下，内部 div 的样式会被外部 div 所覆盖。但是，有时候我们想让内部 div 的样式可以突破外部 div 的限制，即覆盖掉外部 div 的样式。本文将介绍如何使用 CSS 实现这个效果。

方法一：使用绝对定位

可以将内部 div 使用绝对定位，这样它就不再受到外部 div 的限制。但是注意，使用绝对定位时，内部 div 的位置是相对于最近的定位祖先元素而定位的。否则，内部 div 的位置会根据文档流而定位，就会出现位置混乱的情况。

.outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
}

方法二：使用 z-index 属性

如果内部 div 的 z-index 属性值比外部 div 的高，那么内部 div 就可以覆盖外部 div 的样式。

.outer {
  z-index: 1;
}

.inner {
  z-index: 2;
}

方法三：使用伪元素

可以使用伪元素来将内部 div 嵌套在另一个 div 中，使其脱离外部 div 的限制。具体做法是，在 inner div 上使用 before 或 after 伪元素，并将该元素的 content 设置为空。

.outer::before {
  content: "";
}

.inner {
  position: relative;
}

.inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

以上就是 CSS div 覆盖 div 的几种方法。使用它们，你就可以轻松地实现需要内部 div 覆盖外部 div 样式的效果。