代码之家 › 专栏 › 技术社区 › cham

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

css-position css html

cham · 技术社区 · 6 年前

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

<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元素之间的关系有什么影响?

附言:有人能推荐一个更好的头衔吗?似乎很难找出这个问题。

2 回复 | 直到 6 年前

MW_dev 6 年前

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

你的实际问题是因为 blogHead 当绝对定位的内容从正常流中移除时,DIV将折叠。

如果我们在 博客 .

.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 是一种现代的方法。或者,您可以查看浮动、显示:内联块或手动给出 .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>

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

Adrian Brand 6 年前

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

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