如何防止一个 DIV 坐在另一个 DIV 之上？

Question

我很难让一个 div 不躺在另一个 div 上面。我有以下

<div id="navbar">
    <div id="leftNavSection"></div>
    <div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>

伴随 CSS …

#rightNavSection {
  float: right;
}

但是，当我在下方添加此 div 时，它与导航 div 在同一垂直平面上对齐。

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>

这是说明问题的 JSFiddle — https://jsfiddle.net/z4rw9qj1/。如果我向导航添加固定高度 div（例如“height: 10px;”），则不会发生叠加，但我不想添加固定高度，因为如果有人调整他们的浏览器字体大小，或者我添加其他元素，那么外观就坏了。有什么办法可以让下面的 div 不践踏上面的 div？

Answer 1

你试过 z-index 属性了吗？属性决定元素在 "front-back" 轴上对齐的顺序。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

那是因为 float: right，如果在 header DEMO

上添加 overflow: hidden 就可以解决这个问题

header {
  overflow: hidden;
}

如何防止一个 DIV 坐在另一个 DIV 之上？

How do I prevent one DIV from sitting on top of another DIV?

html

css

height

css-float