静态 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>

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

.blogHead {
    position: relative;
}

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

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

发生冲突

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

影响它 parent 和后续 non-positioned p 元素之间关系的 h1 位置是什么？

PS: 谁能推荐一个更好的标题？这个问题好像很难搜出来

Answer 1

绝对位置对浏览器来说是绝对的window，所以0,0就是浏览器的左上角。将它们都放在容器中 div 并在容器中设置绝对位置。

一旦你使某物成为绝对位置，它就不再在文档流中，也不会影响其他元素的流，因此不再将其他元素向下推。

Answer 2

绝对定位的元素相对于具有 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 是一种现代方法。或者你可以看看花车，display:inline-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>

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

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

Is a static HTML element not affected by positioned elements?

html

css

css-position