Html 当父级使用背景时伪元素被隐藏

.parent {
  background: yellow;
}

#element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
  border: 4px solid black;
}

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;

  position: absolute;
  z-index: -1;
  border: 4px solid black;
}

<div class="parent">
  <div id="element"></div>
</div>

.parent {
  background: yellow;
  transform: translateZ(-1px)
}

#element {
  position: relative;
  /* optional */
  width: 100px;
  height: 100px;
  background-color: blue;
}

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;
  /* create a new stacking context */
  position: absolute;
  z-index: -1;
  /* to be below the parent element */
}

<div class="parent">
  <div id="element"></div>
  <div id="yellow"></div>
</div>

.parent {
  background-color: yellow;
  width: 100%;
  position: absolute;
  z-index: -2;
}

#element {
  position: relative;
  /* optional */
  width: 100px;
  height: 100px;
  background-color: blue;
}

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;
  /* create a new stacking context */
  position: absolute;
  z-index: -1;
  /* to be below the parent element */
}

<div class="parent">
  <div id="element"></div>
  <div id="yellow"></div>
</div>

Html相关问答推荐

如何让一个动态列表以网格方式水平显示

css网格区域的布局不展开，也不显示滚动条

悬停时跳转的内容

如何将CSS滤镜仅应用于背景图像

我无法从带Angular 的Bootstrap 5中的表单中获取数据

未在抖动中播放的HTML音频｜｜文本正在工作其他标记正在播放，但音频未播放

不呈现孙子元素，使用R htmlTools：：Taglist为分页的pdf生成HTML

如何制作带有粘性头和脚的可滚动车身

水平行中按钮的垂直偏移

为什么一个 CSS 网格框比其他网格框低？

如何使粘性导航栏能够跨其他组件工作？

如何使用 Flutter 构建 Chrome 扩展？

margin-top 未应用于无序列表的第一项

使用 Thymeleaf 将图像水平居中

：：可点击图标之前

一旦大于最大限制，JQuery 取消 Select 复选框

在HTML请求中添加源URL

在 React (NEXT) 中，当我try 进行动态补充时，我无法使用实例this来引用输入

辅助功能：alt 或 alt="" 用于装饰图像

为什么浏览器在 Select 一个包裹在 标签中的块级元素后包含相邻元素？