爲什麼我的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從不是父類的東西繼承高度？

回答

相關問題