Question

我试图让菜单重叠内容，但截至目前，它已将内容框移开。

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

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

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

黄色menubox需要绝对定位，以免干扰文档的流动（占用空间）。

给它position:absolute;

此外，.box元素需要position:relative，因此菜单相对于该框定位。

为您更新了小提琴：

http://jsfiddle.net/CcVnL/11/

Answer 2

使用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 */
}

修改：更好的位置

Answer 3

检查以下链接我已更新您的代码。 “jsfiddle.net/CcVnL/9 /”

定位和z-index问题

3 个答案: