谁是这个绝对位置元素的参考：浮动父母还是绝对祖父母？

Question

一个"理论"的css问题。

我想对在这种情况下应该发生的事情进行某种澄清......

---

这是我的 HTML 的总结版本...

<div id="some_navbar">
    <ul>
        <li id="plain_li"><a href="#">HELLO</a></li>
        <li id="dropdown_li"><a href="#">GOODBYE</a>
            <ul>
                <li><a href="#">FOR NOW</a></li>
                <li><a href="#">FOR GOOD</a></li>
            </ul>
        </li>
    </ul>
</div>

这是我的样式表

#some_navbar {
    position: absolute; /* A positioned ancestor does exist. */
    top: 0.75em;
    right: 1.5em;
}
#some_navbar li,
#some_navbar a {
    display: block;
}
#some_navbar ul {
    list-style-type: none;
}
#some_navbar > ul {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}
#some_navbar > ul > li {
    float: right;
    margin: 0;
    padding: 0.75em 1.5em;
    border: 1px solid grey;
    }
#dropdown_li > ul {
    display: none;
}
#dropdown_li:hover > ul {
    display: block;
    position: absolute;
    top: 1em;
}

我读到绝对意味着"元素相对于其第一个定位(非静态(祖先元素定位"。

那么这是否意味着我的最后一个选择器元素(#dropdown_li:hover > ul(相对于其浮动父li(换句话说，浮动是否有资格作为定位(或相对于其绝对定位的曾祖父元素(#some_navbar(？

Answer 1

我在这个JSFIDDLE中为您解构了代码

它将向您显示所讨论的元素与其浮动父元素不是"相对的"。为此，您必须将父元素设置为 position: relative 。

#some_navbar {
    position: absolute; /* A positioned ancestor does exist. */
    border: 1px solid red;
    left: 5em;
    width: 300px;
    height: 300px;
}
#some_navbar li,
#some_navbar a {
    display: block;
}
#some_navbar ul {
    list-style-type: none;
}
#some_navbar > ul {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}
#some_navbar > ul > li {
    float: right;
    margin: 0;
    border: 1px solid grey;
    }
#dropdown_li > ul {
    display: none;
}
#dropdown_li:hover > ul {
    display: block;
    position: absolute;
    border: 1px solid green;
    left: 0;
    bottom: 0;
}

Answer 2

浮动不算作定位。"定位"是指position属性的static以外的值。因此，#dropdown_li:hover > ul将相对于#some_navbar定位，因为它是最接近的祖先，其position不static