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元素的position属性设为绝对，则文本将移至浏览器顶部并与.blogHead div冲突。

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

影响h1的父级与随后的非定位p元素之间关系的h1的位置是什么？

PS：有人可以建议一个更好的标题吗？似乎很难解决这个问题。

Answer 1

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

您的实际问题是因为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高度。

我将为您提供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>

以下是我提到的其他方法的一些简单而又肮脏的例子：

Answer 2

绝对位置绝对值是浏览器窗口的绝对值，因此0,0是浏览器的左上角。将它们都放在容器div中，并在容器上使其绝对位置。

一旦将某个位置确定为绝对位置，它就不再在文档流中，并且不会影响其他元素的流，因此不再将其他元素向下推。

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

2 个答案: