javascript - 定位和 z-index 问题

Question

我试图让菜单与内容重叠，但到目前为止它会将内容框移开。

我已经尝试过 position:relative 技巧，但问题似乎并没有消失。解决方案可能非常明显，但我需要帮助找到它。

编辑:抱歉，忘记添加，该框也可以调整大小()，所以我试图避免绝对定位。 编辑2:没关系，right:5px解决了这个问题

JSFiddle

HTML

<div class="box">
    <div class="top">
        <div class="icon"></div>
        <div class="menubox">
            <ul class="menu">
                <li><a href="#">Menu Option 1</a>

                </li>
                <li><a href="#">Menu Option 2</a>

                </li>
            </ul>
        </div>
    </div>
    <div class="content">
        <p>content goes here</p>
    </div>

    <div class="content">
        <p>content goes here</p>
    </div>
</div>

CSS

.box {
    width: 400px;
    height: 200px;
    margin: 5px;
    float: left;
    background: LightGray;
    border: 1px solid DarkGray;
    overflow: hidden;
}
.top {
    width: 100%;
    height: 25px;
    background: lightblue;
}
.icon {
    float: right;
    background: red;
    height: 15px;
    width: 15px;
    margin: 5px;
}
.menubox {
    float: right;
    background: yellow;
    position: relative;
    z-index:100;
    width: 150px;
}
.content {
    width: 180px;
    height: 165px;
    margin: 0px 10px 47px;
    float: left;
    position: relative;
    z-index: 0;
    display: block;
    background:DarkGray;
}
li {
    list-style-type: none;
    text-decoration: none;
}
ul {
    margin:none;
    padding:none;
}

JS/jQuery

$('.icon').mouseover(function () {
    $(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
    $(this).hide();
});

Answer 1

使用position:absolute？ fiddle

.menubox {
    float: right;
    background: yellow;
    position: relative;
    z-index:100;
    width: 150px;
    top: 25px;
    right: 5px;
    position: absolute;
}
.box {
    width: 400px;
    height: 200px;
    margin: 5px;
    float: left;
    background: LightGray;
    border: 1px solid DarkGray;
    overflow: hidden;
    position: relative; /* add this */
}

编辑:更好的位置