Question

我正在创建一个网页，其中包含围绕<div>内容的插入边框的重复设计元素。插入边框使用LESS / CSS完成，并且本身是<div class="inset-border">放置在内容之后但在包装内。

这种方法几乎适用于整个页面。但是，有一个部分，边框不是从父包装器继承它的尺寸，而是它的祖父元素。为什么呢？

边框渲染的CSS：

.inset-border {
  border-style: solid;
  border-color: #ffc174;
  border-width: 1px;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 20px;
  left: 4%;
  z-index: 1;
  pointer-events: none;
}

麻烦的HTML：

<div class="update-container">
  <div class="update-div">
      <span class="small-title">Latest Updates</span>
      <h2 class="slogan">@Html.Raw(title)</h2>
      <a class="updates-button" href="@link">@buttonText</a>
  </div>
  <div class="inset-border"></div>

正常工作的用法实例：

<div class="whitebox-about">
  <div class="col-md-6" style="padding-left:0">
      <h2 class="slogan-right">@Html.Raw(rightblurb)</h2>
  </div>
...
  <div class="inset-border"></div>
</div>

出了什么问题？

Answer 1

您需要将位置设置为父元素。

.update-container {
    position: relative;
}

有关详细信息，请查看MDN - Absolute Positioning。

绝对定位的元素相对于最近定位的祖先（非静态）定位。

这意味着，为了将元素相对于其父元素定位，您需要为父元素设置一个位置。

.parent {
    position: relative;
}

.child {
    position: absolute;
}

现在，子元素将相对于其父元素定位。我们可以使用任何位置值而不是相对值（静态除外），但通常相对是优选的，因为它相对于自身定位元素，因此布局不会改变。

为什么我的div从不是父母的东西继承高度？

1 个答案: