css 为什么伪元素覆盖父元素？[重复]

nkcskrwz 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(155)

此问题在此处已有答案：

Why can't an element with a z-index value cover its child?（4个答案）
10天前关门了。
我想把::after元素移到parent div下面，但是效果不太好。如何把绿色框移到蓝色下？

.parent {
  height: 100px;
  width: 100px;
  background: blue;
  position: relative;
  z-index: 10;
}

.parent::after {
  position: absolute;
  top: -10px;
  background: green;
  content: '';
  height: 40px;
  width: 40px;
  z-index: 2;
}

个字符

css

来源：https://stackoverflow.com/questions/77729805/why-does-the-pseudo-element-overlays-parent

1条答案

按热度按时间

v1uwarro1#

因为你在.parent上有position: relative。你可以添加一个.container并将position: relative移动到它。

.container {
  height: 100px;
  width: 100px;
  position: relative;
}

.parent {
  width: 100%;
  height: 100%;
  background: blue;
}

.parent::after {
  position: absolute;
  top: -10px;
  background: green;
  content: '';
  height: 40px;
  width: 40px;
  z-index: -1;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 为什么伪元素覆盖父元素？[重复]

1条答案

相关问题

热门标签

最新问答