css - Z-index 不工作 div 并排不在顶部

Question

我正在处理布局，我必须将它们显示为并排显示的 div，而不是一个在另一个之上，导航框应该位于右侧上方。我已经为 navbox 设置了 z-index，但没有区别。

我做了一个小提琴http://jsfiddle.net/JGesg/

这是div的css，

#navbox
{
    background: red;
    width:70px;
    height:50px;
    z-index:50;
    top:0;
    float:right;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding-top: 5px;
}


#right-side{
    top:5%;
    width:20%;
    height:90%;
    float:right;
    padding:0.2%;
    background-color: green;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Answer 1

将 div#navbox放在div 里面#right-side

Answer 2

HTML 代码：

<div id ="right-side">
     <div id="navbox"><hr><hr><hr>
     </div>
</div>

你有问题，因为你没有声明position和 的px位置数

#navbox
{
    position:relative;
    background: red;
    width:70px;
    height:50px;
    z-index:50;
    top:5px;
    left:5px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
}


#right-side{
    position:relative;
    top:0px;
    width:20%;
    height:90%;
    float:right;
    padding:0.2%;
    background-color: green;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

我希望这可以帮助你