无法让文字保持定位

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>
  <header>
    <h2></h2>
  </header>
  <content>
    <img>
    <p></p>
  </content>
</article>

如你所见。您的h2位于标题内，img和p位于内容块中。我还制作了代码截图，突出了我所谈论的元素。

您必须将img（包括它的直接父a）放在h2之前，并且它可能会被修复。

希望这有帮助