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

我正在制作一个网页，该网页具有围绕内容<div>的插入边框的反复出现的设计元素。插入边框用LESS/CSS完成，它本身是一个放置在内容之后但位于包装内的<div class="inset-border">。为什么我的div从不是父类的东西继承高度？

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

用于边框的渲染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>

出了什么问题？

来源

2017-05-04 UrhoKarila

绝对位置会将元素放置在其父级之外。尝试设置相对于父级的位置来约束元素。 '.update-container {position：relative;}' –

注意：在'麻烦的html'的末尾，有一个匹配的结束div标签。这不是渲染问题，我不知道为什么。 – UrhoKarila

@ m.spyratos完成了！如果您希望将其作为完整答案提交，我会接受它。 – UrhoKarila

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

.update-container { 
    position: relative; 
}

欲了解更多详细信息，请MDN - Absolute Positioning。

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

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

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
}

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

来源

2017-05-04 15:05:21

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

回答

相关问题