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

Question

我正在尝试这样设置 div 的位置：

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

橙色框在最上面
蓝色和浅绿色div是按钮
红框在橙框下是静止的
绿框 link 里面有图片，覆盖了部分蓝色和浅绿色按钮。
每 links 每次都必须保持可点击。

我无法将绿色图像居中并将其部分设置在橙色上方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
}

我将其定位为绝对位置，因为这样它会根据 body 相对定位到达您想要的任何位置。

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

只需将此添加到您的图片中即可 class:

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

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

How to position div div above another divs

html

css

css-position