html - 这个绝对位置元素 : the floating parent or the absolute grandparent? 的引用是谁

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;
}

我read absolute 表示“元素相对于其第一个定位(非静态)祖先元素定位”。

这是否意味着我的最后一个选择器元素 (#dropdown_li:hover > ul) 相对于其 float 父元素 li 定位(换句话说， float 是否符合条件作为这种意义上的定位)还是绝对定位的曾祖 parent (#some_navbar)？

Answer 1

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

它会向您表明所讨论的元素与其 float 父元素不是“相对的”。为此，您必须将父元素设置为 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;
}