Question

我无法让一个div不要躺在另一个div之上。我有以下

public function parts(){ 
 return $this->belongsToMany('App\Part');    
}

随附CSS ...

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

然而，当我在下面添加这个div时，它在与导航div相同的垂直平面上排列。

#rightNavSection {
  float: right;
}

这是解释问题的JSFiddle - https://jsfiddle.net/z4rw9qj1/。如果我向导航div添加一个固定高度（例如“height：10px;”），那么覆盖不会发生，但我不想添加固定高度，因为如果有人调整他们的浏览器字体大小，或者我添加其他元素，然后外观被打破。有没有办法让低级div不要践踏上层div？

Answer 1

您是否尝试过z-index属性？它是一个属性，决定元素在“前后”轴上对齐的顺序。

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

Answer 2

这是因为netsh interface show interface，如果您在float: right DEMO

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

header

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

2 个答案: