时间戳

首页 > 解决方案 > 静态 HTML 元素是否不受定位元素的影响？

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

问题描述

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

<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 元素之间的关系？

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

标签： htmlcsscss-position

解决方案

绝对定位的元素相对于最近的祖先定位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是一种现代方法。或者，您可以查看 floats、display:inline-block 或手动提供.blogHeadhieght。

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

以下是我提到的其他方法的一些快速而肮脏的示例：

推荐阅读