Question

A＆＃34;理论＆＃34; 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 绝对意味着＆＃34;元素相对于其第一个定位（非静态）祖先元素定位＆＃34;。

这是否意味着我的最后一个选择器元素（#dropdown_li:hover > ul）相对于其浮动父li定位（换句话说，浮动符合此定义的定位）或者它也绝对定位曾祖父母（#some_navbar）？

Answer 1

我在此JSFIDDLE

中为您解构了代码

它会告诉你有问题的元素不是＆＃34;亲属＆＃34;它的浮动父母。为此，您必须将父元素设置为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

浮动不算作定位。 “定位”表示static属性的position以外的值。因此，#dropdown_li:hover > ul相对于#some_navbar定位，因为它是position不是static

的最近祖先

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

2 个答案: