Css 如何在父叠加层之上呈现子子

发布于12月04日

我想要一个灰色的覆盖物，除了selected个以外的所有子元素.假设 struct 如下:

<div class="parent">

  <!-- I have this subparent which is absolute. I cannot remove it... -->
  <div class="subParent1">
    <div class="subParent2">

      <!-- This child I want to be above the OVERLAY, aka not greyed out -->
      <div class="child selected">child</div>

      <div class="child">child</div>
      <div class="child">child</div>
    </div>
  </div>

  
  <!--   This component is underneat subParent in the tree structure -->    
  <div class="grayOverlay"></div>
  
</div>

Here's an exact fiddle.也许，我可以使用伪元素来代替？

PS:我更新子代码，使其更加嵌套，与我的实际代码保持一致.

推荐答案

您可以从下面的代码中获取参考.我对css做了一些修改.我已经在任何需要的地方增加了z-index个，你可以优化它.此外，从subParent1中删除了position: absolute;，并在grayOverlay上增加了top: 0; left: 0;.您可以根据自己的喜好对其进行优化或更改.

.parent {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: gray;
}

.grayOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgb(107 114 128 / 0.8);
  z-index: 11000;
}

.subParent1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 12000;
}

.child {
  color: black;
  width: 50px;
  height: 20px;
  background-color: white;
  margin: 10px;
  z-index: 10000;
}

.childIWantOverOverlay {
  background-color: red;
  z-index: 12000;
}

<div class="parent">

  <div class="subParent1">
    <div class="child childIWantOverOverlay">child</div>
    <div class="child">child</div>
    <div class="child">child</div>
  </div>

  <!--   This component is underneat subParent in the tree structure -->
  <div class="grayOverlay"></div>

</div>