Question

我正试图像这样设置div的位置：

但我无法将图像（绿框）设置到位。

橙色框位于顶部
blue和lightgreen div是按钮
红框在橙色框下是静态的
绿色框与图像内部链接，部分覆盖蓝色和浅绿色按钮。
每次链接都必须保持可点击状态。

我不能将绿色图像居中并将其部分设置在橙色div之上。

示例代码here

<div class="header-container">
<div class="nav-container">
    <div class="logo">
        <a href="1">Click!</a>
    </div>
    <div class="nav">
        <a href="2">Click!</a>
    </div>
</div>
<div class="header-image">
    <div class="image">
        <a href="3">Click!</a>
    </div>
</div>
<div class="menu-container">
    <a href="4">Click!</a>
</div>

.nav-container{
    width: 100%;
    height: 50px;
    background: orange;
}
.logo{
    width: 25%;
    height: 40px;
    margin: 5px;
    background-color: lightblue;
    float: left;
}
.nav{
    width: 25%;
    height: 40px;
    margin: 5px;
    background-color: lightgreen;
    float: right;
}
.header-image{
    width: 100%;
    border: 1px solid green;
    position: relative;
    z-index: 2;
    text-align: center;
}
.image{
    height: 100px;
    width: 60%;

    background: green;
    opacity: 0.6;
}
.header-image a{
    padding: 40px 0;
}
.menu-container{
    width: 100%;
    border: 1px red solid;
    height: 40px;
    margin-top: 50px;
}

Answer 1

我上传了你的jsfiddle here。

添加以下css：

.header-image {
    position: absolute;
    top: 40px;
    left: 20%;
}

还为.menu-container

添加了额外的margin-top

.menu-container {
    margin-top: 80px; //instead of 50px
}

我把它定位为绝对的，因为这样它可以根据身体的相对位置去任何你想要的地方。

Answer 2

将其添加到image应该有效：

margin:0 auto;
position:relatve;
z-index:66;
margin-top:-10px

http://jsfiddle.net/o3oyuzb9/2/

Answer 3

尝试this

只更改了css

body,html{margin: 10px;}
.header-container{
    width: 100%;
}
a{
    text-decoration:none;
    color:#000;
    padding: 10px 0px;
    display: block;
    text-align: center;
}
.nav-container{
    width: 100%;
    height: 50px;
    background: orange;
}
.logo{
    width: 25%;
    height: 40px;
    margin: 5px;
    background-color: lightblue;
    float: left;
}
.nav{
    width: 25%;
    height: 40px;
    margin: 5px;
    background-color: lightgreen;
    float: right;
}
.header-image{
    width: 100%;
    border: 1px solid green;
    position: relative;
    z-index: 2;
    text-align: center;
}
.image{
    height: 100px;
    width: 60%;
    margin: 0 auto;
    margin-top: -20px;
    background: green;
    opacity: 0.6;
}
.header-image a{
    padding: 40px 0;
}
.menu-container{
    width: 100%;
    border: 1px red solid;
    height: 40px;
    margin-top: 50px;
}

只需将其添加到您的图片类：

margin: 0 auto;
margin-top: -20px;

如何将div div置于另一个div之上

3 个答案: