css - 无法让文字保持定位

Question

我正在尝试设置博客布局的样式，但是当博客的标题较长（而不是向下推该段落）时，博客标题（条目内容）与摘录段落重叠。如何使它不重叠？谢谢，这里看起来是重叠的。http://rebelde.website/test6/blog/

.brick img {
    clear: both;
    display: block;
    float: none;
    height: 200px !important;
    margin-bottom: 50px;
    mix-blend-mode: inherit;
    position: relative;
    z-index: 1;
}


.brick .entry-title {

   font-size: 40px;
   font-family: oswald;
   font-weight: 700;
   color: #000;
   position: absolute;
   float: right;
   top: 227px;
   clear: both;
}



p {
    color: #072701;
    display: block;
    font-family: oswald;
    margin: 0 0 16px;
    overflow: auto;
    padding-left: 10px;
    padding-right: 1px;
    position: relative;
    clear:both;
}

Answer 1

这里有几处可以改进的地方。
要使文本动态移动，应从position: absolute中删除​​h2。绝对定位的元素永远不会“随波逐流”。它们不影响其他元素。删除后，您会看到h2将转到article块的顶部。那是因为您的文章块的层次结构是这样的

<article>
  <header>
    <h2></h2>
  </header>
  <content>
    <img>
    <p></p>
  </content>
</article>

如你看到的。您的 h2在标题内，而 img和 p在内容块内。我还制作了您的代码的屏幕截图，突出显示了我正在谈论的元素。



您必须将 img（包括它的直接父级 a）放在 h2之前，并且它可能是固定的。

希望这可以帮助