Z-index无法正常工作img元素隐藏在父div后面

Question

我需要将img元素（以及有关该项目的其他相关信息）放置在div的右下角，其类别为“ projectItem green”。

定位效果很好，但是我无法在两个父div下获得img元素，以便在屏幕上可见。元素突出显示实际上突出显示了该元素，但是您只能看到不可见元素周围的网格。

我尝试将z-index与img元素（而不是div）一起使用。我还尝试将display：block参数添加到img元素，并在其中使用z-index。

非常感谢任何指针！

这是我的代码

<div class="projectItem green">
  <div class="projectNumber">I-8000</div>
  <div title="Testprojekt 25.05.2018" class="halfWidth">Testprojekt 25.05.2018</div>
  <div class="halfWidth"><span>Start:&nbsp;</span><span>5/25/2018</span></div>
  <div title="" class="halfWidth">UserName</div>
  <div class="halfWidth"><span>End:&nbsp;</span><span style="margin-left: 8px;">6/1/2020</span></div>
  <div class="halfWidth">Last status update:</div>
  <div class="halfWidth"><span style="margin-left: 43px;">5/25/2018</span></div>
  <div style="width: 100%; display: inline-block; position: relative; z-index: 1000;"><img style="position: absolute; bottom: 0; right: 0"
     src="/system/pscbaf/ImagesLogos/IPM/IPM_NotReported_Icon.PNG"> 
  </div>
</div>

这是DOM的屏幕截图

这就是我要得到的

这就是我要实现的目标

Answer 1

您可以在其他元素上添加一些z-index，该值将小于img的z-index