html - css是不是层叠？

Question

我想在标题底部放置一个下拉菜单。无论出于何种原因，菜单都不会被视为标题的一部分。

HTML代码:

<div id="header">
<div id="navbarList">
{% if userroles %}
{% if 'root' in userroles %}
{% include "rootMenu.html" %}
{% elif 'admin' in userroles %}
{% include "adminMenu.html" %}
{% elif 'worker' in userroles %}
{% include "workerMenu.html" %}
{% else %}
{% include "NoMenu.html" %}
{% endif %}
{% else %}
{% if login is defined and login is not none %}
{% include "Home.html" %}
{% endif %}
{% endif %}
</div>
</div>

CSS 代码:

#header{
min-height:95px;
width:100%;
margin:0;
background-color:black;
}
#navbarList{
list-style:none;
width:65%;
position:absolute;
bottom:0;
right:0;
}

当我使用 firebug 查看站点时，我发现导航栏没有继承标题的 css。我错过了什么？

Answer 1

Not all css properties are inherited . min-height 和大多数高度/边距属性不是，例如，因为假定子 div 或其他对象将具有与其父对象不同的维度属性，只要它们在层次上位于其他元素的“内部”。否则，指定父元素的宽度会自动使其所有子元素与父元素一样大!

有关继承/不继承的特定属性列表，请查看此处:http://www.w3.org/TR/CSS21/propidx.html

但是，如果您询问的是定位，问题出在导航栏中指定的 position: absolute 中。这会将 div 从文档的正常流中移除，并将其绝对定位在 html 的右下角。如果您希望导航栏相对于标题绝对定位，请将 position: relative 放在标题上，这将启用相对绝对子定位。有关更多信息，请参见此处:http://css-tricks.com/absolute-positioning-inside-relative-positioning/

这是您当前设置的 JSFiddle:

http://jsfiddle.net/maQa6/

这是在 header 中指定了 position: relative 之后:(为清楚起见，字体更改为白色)

http://jsfiddle.net/V5Dpn/