html - 位置 :absolute behaving strangely until I uncheck and recheck css rule

Question

我有一个带有侧边栏的页面，其中包含最近发布的图片。在这些图像上应该是绝对定位的文本。它应该看起来像这样......

...相反，文本显示如下...

...但是，当我检查并取消选中 position:absolute，然后重新选中它时，它显示正常。

你可以在这里看到一个例子.. https://evolvefitness.co.uk/blog/the-four-best-idiot-proof-exercises/

这是 html 的片段...

<ul>
  <li class="grid-100 grid-parent tablet-grid-33">
    <a href="https://evolvefitness.co.uk/blog/five-steps-to-shoulders-that-dont-hurt/" title="Look Five Steps To Shoulders That Don't Hurt">
      <img width="504" height="500" src="https://evolvefitness.co.uk/wp-content/uploads/2018/02/IMG_5085-e1520514533997-504x500.jpg" class="attachment-sideline size-sideline wp-post-image" alt="" srcset="https://evolvefitness.co.uk/wp-content/uploads/2018/02/IMG_5085-e1520514533997-504x500.jpg 504w, https://evolvefitness.co.uk/wp-content/uploads/2018/02/IMG_5085-e1520514533997-150x150.jpg 150w" sizes="(max-width: 504px) 100vw, 504px">
      <h4>Five Steps To Shoulders That Don't Hurt</h4>
    </a>
  </li> 
</ul>

...还有一些CSS...

.pecent ul li a {
width: 100%;
height: 100%;
position: relative;
min-height: 100px;
}

.pecent ul li h4 {
text-transform: uppercase;
background: #e83443;
color: white;
padding: 10px;
z-index: 9;
position: absolute;
bottom: 20px;
left: 0px;
font-size: 26px;
}

Answer 1

您只是在 .pecent ul li a 上缺少一个 display:block:

.pecent ul li a {
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 100px;
  display: block;  /* add this */
}