如何在其父块下移动伪元素？

Question

我希望绿色元素位于文本框下方，也位于图像下方 我试图为每个元素设置z-index，但没有任何改变 我可以通过z-index属性来达到这个目的吗？

我无法改变HTML。而且我还希望伪元素是自适应高度

的文本块的子元素

＆＃13;

＆＃13;

.item {
  display: flex;
  align-items: flex-start;
  width: 400px;
  height: 250px;
}

.col1 {
  margin-right: 20px;
}

.col2 {
  position: relative;
  z-index: 1;
  width: 200px;
  height: auto;
  padding: 5px;
  background-color: gray;
}

.col2::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -60px;
  width: 150px;
  min-height: 100px;
  height: 100%;
  z-index: -1;
  background-color: seagreen;
}

.image {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 150px;
}

＆＃13;

<div class="item">
  <div class="col1">
    <img class="image" src="http://satyr.io/200x150/1" />
  </div>
  <div class="col2">
    <p class="title">Lorem ipsum dolor</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima esse ipsam error repudiandae ut amet.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

从班级call C:\SCAN\ScanningSingledrive_v2.bat C: call C:\SCAN\ScanningSingledrive_v2.bat D: call C:\SCAN\ScanningSingledrive_v2.bat E: call C:\SCAN\ScanningSingledrive_v2.bat F: 移除z-index: 1。因此，绿色块将出现在图像和文本框下面。

Answer 2

您可以在<div class="col2">内放置一个元素，因为伪元素不能具有该元素本身的较低z-index。然后在<div class="col2">内放置一个div，您可以在其上应用z-index和灰色背景。