Html 制作一个伪元素以完全覆盖父容器？

我创建了一个

div

，里面有一个

img

和一些文本。我想让

：before

伪元素完全覆盖父

div

，但我不知道怎么做

.container{
显示：内联块；
宽度：33%；
填充：15px；
框大小：边框框；
边框：2件纯蓝；
}
.货柜：在{
内容：“；
背景颜色：绿色；
宽度：100%；
身高：100%；
显示：块；
转换：所有0.3秒到0秒；
z指数：2；
}
.集装箱img{
最大宽度：100%；
}
.容器h2{
字号：1.5em；
字体风格：普通；
文字装饰：无；
字体大小：400；
}

乱数假文

只需将定位添加到父元素和：before元素。虽然我不确定你打算用红色覆盖层做什么

执行以下操作

• 添加

  位置：相对到
  容器

• 然后将这些行添加到

  .container:before

  ：

  position: absolute;
  top: 0;
  left: 0;
  

以下是我的答案：
关键见解：
• 您需要在父容器中建立定位上下文。这是通过在

  .container

• 通过使用

  position:absolute（位置：绝对）可以避开填充问题；排名：0；左：0；右：0；底部：0（允许您放置
  高度
  和
  宽度
  ）
  

---

我不清楚；您希望在演示代码中没有发生的事情是什么？欢迎使用堆栈溢出。这是一篇很好的第一篇文章，我仍然想推荐你阅读。本页将解释最佳实践，这将增加您的答案被接受的机会。

position: absolute;
top: 0;
left: 0;