这个绝对位置元素的引用是谁：floating parent 还是 absolute grandparent？

Question

一个"theoretical"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那绝对意味着"the element is positioned relative to its first positioned (not static) ancestor element".

这是否意味着我的最后一个选择器元素 ( #dropdown_li:hover > ul ) 是相对于其浮动 parent li 定位的（换句话说，从这个意义上说，浮动是否符合定位条件) 或它也绝对定位的曾祖父 parent ( #some_navbar )?

Answer 1

浮动不算定位。 "Positioning" 表示 position 属性的 static 以外的值。所以 #dropdown_li:hover > ul 将相对于 #some_navbar 定位，因为它是具有 position 而不是 static

的最近的祖先

Answer 2

我在这个JSFIDDLE

中为你解构了你的代码

它会告诉你有问题的元素不是 "relative" 它的浮动父元素。为此，您必须将父元素设置为 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;
}

这个绝对位置元素的引用是谁：floating parent 还是 absolute grandparent？

Who's the reference of this absolutely position element: the floating parent or the absolute grandparent?

html

css

css-position

css-float