html - 静态 HTML 元素是否不受定位元素的影响？

Question

假设我们有一个博客，标题和日期位于一些文本之上:

<div class="blogHead">
  <h1>My blog title</h1>
  <p class="blogDate">The date</p>
</div>

<p class="blogText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

我们还希望日期位于标题的最右侧。一种方法是将它的父级 (.blogHead) 定位为相对的，然后在日期上使用绝对定位:

.blogHead {
    position: relative;
}

.blogDate {
    position: absolute;
    top: 0px;
    right: 0px;
}

这行得通。但是，如果我还使 h1 元素的位置属性成为绝对值，那么文本将移动到浏览器的顶部并与 .blogHead div 发生冲突。

h1 {
    position: absolute;
    top: 0px;
    left: 0px;
}

h1 的位置如何影响其父元素与后续非定位 p 元素之间的关系？

---

PS:谁能推荐一个更好的标题？似乎很难找出这个问题。

Answer 1

绝对定位的元素是相对于最近的具有 position:relative 的祖先定位的，如果没有这样的祖先，则使用 body。

你的实际问题是因为 blogHead div 崩溃了，因为绝对定位的内容从正常流中删除。

如果我们给 blogHead 添加边框，我们可以看到这一点。

.blogHead {
    position: relative;
    border: 1px solid red;
}

.blogDate {
    position: absolute;
    top: 0px;
    right: 0px;
}

h1 {
    position: absolute;
    top: 0px;
    left: 0px;
}

<div class="blogHead">
  <h1>My blog title</h1>
  <p class="blogDate">The date</p>
</div>

<p class="blogText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

这里有几个选项 flexbox是一种现代方法。或者，您可以查看 float 、显示:内联 block ，或手动提供 .blogHead hieght。

我将为您提供 flexbox 解决方案。

.blogHead {
  /*Set the container to flex box*/
  display: flex;
  position: relative;
  border: 1px solid red;
  padding: 12px;
}

.blogHead>* {
  /*Set flex elements to fill the space equally*/
  flex-grow: 1;
}

.blogDate {
  text-align: right;
}

h1 {
  text-align: left;
}

<div class="blogHead">
  <h1>My blog title</h1>
  <p class="blogDate">3 Oct 2018</p>
</div>

<p class="blogText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

以下是我提到的其他方法的一些简单粗暴的示例:

• > Add height to the container
• > Float the date
• > Use inline-block for both