Question

我有以下DOM结构：

<div class="header-content mx-auto" style='margin-top:-250px;'>
    <div class='circle' id='yellow' style='background-color:#FFBE00'></div>
    <div class='circle' id='grey' style='background-color:#9A8966'></div>
    <div class='circle' id='pink' style='background-color:blue'></div>
    <div class='circle' id='darkred' style='background-color:#B90808'></div>
    <div class='circle' id='red' style='background-color:#F91000'></div>
    <h1 class="mb-5" style='width:1000px;'>
        <span id='I'>I</span>
        <span id='Am'>Am</span>
        <span id='your'>Y</span>
        <span id='cognitive'>c</span>
        <span id='assistant'>A</span>
    </h1>
    <div style='width:500px;height:200px;margin-top:100px;background-color:red' id='container'>
        <div style='position:absolute;left:70px;height:30px;width:100px;background-color:green;'></div>
    </div>
</div>

最新的div元素位于绝对位置，但它不是最近的祖先，它是#container。这是为什么？它相对于＃header-content。

定位

Answer 1

元素相对于相对位置定位家长。您必须在父项上指定相对位置你想要定位子元素。如果没有定位父，然后默认所有绝对定位元素用身体来定位自己。

因此，在您的情况下，最后一个div的位置与#container无关，因为它没有给出position:relative，也没有相对于{{1}定位但它相对于header-content

定位

Answer 2

假设您的内容包含在#container div中。它不会相对于这个div，因为它没有相对属性。添加位置：相对;对此，它应该工作。

Answer 3

您需要将#container设置为position: relative

所有absolute个定位元素都是相对于下一个relative父元素呈现的。然而position的初始值是static，它被绝对元素忽略。

位置：绝对不是最近的祖先

3 个答案: