位置：绝对表现奇怪，直到我取消选中并重新检查css规则

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上错过了.pecent ul li a { width: 100%; height: 100%; position: relative; min-height: 100px; display: block; /* add this */ } ：

class SingletonTwo private constructor(){

    var myAge: Int = 16

    companion object {
        val ourInstance = SingletonTwo()
    }

}