Html 覆盖不会覆盖所有div css

我正在制作叠加效果，但问题是叠加div并没有将所有的div都包含在内。覆盖背景可见，但div在覆盖div之外也可见

CSS

.overlay\u效果{
背景色：rgba（0,0,0,0.5）；
z指数：2；
}
.列和{
宽度：340px；
填充：8px；
}
.价格{
列表样式类型：无；
边框：1px实心#22ADE3；
保证金：0；
填充：0；
-webkit转换：0.3s；
过渡：0.3s；
溢出：隐藏；
}
.价格.标题{
背景色：#22ADE3；
颜色：#fff；
字体大小：13px；
填充：10px；
}
李先生{
填充：7px；
文本对齐：居中；
}
李：第n个孩子（4）{
右边框：1px实心#22ADE3；
}
.价格.灰色价格{
浮动：左；
宽度：50%；
背景色：#eee；
字体大小：13px；
右边框：1px实心#22ADE3；
边框底部：1px实心#22ADE3；
}
.价格。灰色的价格对吗{
浮动：左；
宽度：50%；
背景色：#eee；
字体大小：13px；
边框底部：1px实心#22ADE3；
}
.左{
浮动：左；
宽度：50%；
字体大小：13px；
边框底部：1px实心#22ADE3；
}
.avl_文本{
显示：内联块；
文本对齐：对齐！重要；
字体大小：13px；
}

虚拟文本
虚拟文本
虚拟文本
虚拟文本
可用性：Lorem ipsum dolor sit amet，Concertetuer Adipsicing Elite。在rutrum。普拉森特·达皮布斯。Phasellus和lorem是一只猫科动物。未经选择的未经选择的化学物质

对于覆盖宿主元素（此处：

div.columns\u sum

）内容的覆盖，只需使用伪元素

：：after

：

.columns_sum::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
}

.columns_sum {
  position: relative;
}

要使定位正常工作，需要添加

position:relative到承载
的元素：：在
之后：

.columns_sum::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
}

.columns_sum {
  position: relative;
}

否则，绝对定位指的是最近定位的祖先元素（如果没有，则为
主体
）


.columns\u sum{
宽度：340px；
填充：8px；
位置：相对位置；
}
.columns_sum:：after{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,5）；
}
.价格{
列表样式类型：无；
边框：1px实心#22ADE3；
保证金：0；
填充：0；
过渡：0.3s；
溢出：隐藏；
}
.价格.标题{
背景色：#22ADE3；
颜色：#fff；
字体大小：13px；
填充：10px；
}
李先生{
填充：7px；
文本对齐：居中；
}
李：第n个孩子（4）{
右边框：1px实心#22ADE3；
}
.价格.灰色价格{
浮动：左；
宽度：50%；
背景色：#eee；
字体大小：13px；
右边框：1px实心#22ADE3；
边框底部：1px实心#22ADE3；
}
.价格。灰色的价格对吗{
浮动：左；
宽度：50%；
背景色：#eee；
字体大小：13px；
边框底部：1px实心#22ADE3；
}
.左{
浮动：左；
宽度：50%；
字体大小：13px；
边框底部：1px实心#22ADE3；
}
.avl_文本{
显示：内联块；
文本对齐：对齐！重要；
字体大小：13px；
}


虚拟文本
虚拟文本
虚拟文本
虚拟文本
可用性：Lorem ipsum dolor sit amet，Concertetuer Adipsicing Elite。在rutrum。普拉森特·达皮布斯。Phasellus和lorem是一只猫科动物。未经选择的未经选择的化学物质

您可以将覆盖作为
的子元素，而不是
ul
列表的父元素

<div class="columns_sum">
    <div class="overlay_effect">
    </div>
    <ul class="price">
      <li class="header">Dummy text</li>
      <li class="grey_msg">Dummy text</li>
      <li class="coverage_left">Dummy Text</li>
      <li class="coverage_left">Dummy Text</li>
      <li class="avl_text">Availability: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In rutrum. Praesent dapibus. Phasellus et lorem id felis nonummy placerat. Nulla non lectus sed nisl molestie malesuada.</li>
    </ul>
</div>

叠加效应元素将被置于绝对位置

.overlay_effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 100;
}

这将使
覆盖效果
元素覆盖
中的所有其他子元素。列
元素
您希望它看起来像什么？@LazarLjubenovićI want overlay background应该放在第一位，其余所有div都在后面that@Jason你说的落后是什么意思？你能画一点草图吗？z-index可以定位。例如：位置：绝对；z指数：2。这可能就是问题所在。@BirdieGolden我这样做了，但问题是当我使用position and z-index overlay background时，有六个
列\u sum
div占据了整个浏览器的大小，而不仅仅是
列\u sum
大小，这正是我的答案，而是使用了伪元素，他不能在覆盖层上放置任何内容。但有了我提供的代码，他可以将任何代码放入覆盖元素中，并以他不希望的方式对其进行样式化。只有当他不想做一些不透明度很小的覆盖来覆盖列表中没有任何内容的内容时，伪代码才会很有趣。我得到了要点，以及避免覆盖移动到外部的技术，就像现在它从填充中提取了一些大小，我想它与
列的大小不完全相同。\u sum
您可以将
*{box size:border box；}
放在样式文件的顶部，并在
上添加
溢出：隐藏的
。列的大小\u sum
元素当您制作100%宽度和高度的覆盖时，因为父元素处于相对位置，所以覆盖将具有与其父元素完全相同的大小。它不会受到父元素填充的影响，因为当您将某些元素放置在绝对位置时，它会超出正常标记流，而不会占据正常标记流中应该占据的位置。我得到了点，以及避免重叠移动到外部的技术，就像现在它从填充中提取了一些大小，我想它的
列\u sum