如何将div叠加到另一个div而不改变它们的位置 - Css

Question

我在网页顶部有两个div。我只想将顶部div的阴影与下一个重叠。绝对和相对定位通过扩展或固定位置完全改变了div的位置/位置。是否有一行代码可以决定哪个div重叠，哪个div不会改变它们的位置？如果没有，我怎么能用定位来做到这一点？ 我的顶级div：

div#divSlogan{
    background-color: #FFBD01;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1.15%;
    padding: 0.1%;
    -moz-box-shadow: 0px 0px 10px 2px #888888;
    -webkit-box-shadow: 0px 0px 10px 2px #888888;
    box-shadow:  0px 0px 10px 2px #888888;
}

以下div：

div#menu{
    text-align: center;
    font-size: 120%;
    background-color: #FFA700;
    padding: 0.1%;
    height: 20%;
    width: 49%;
    margin-left: auto;
    margin-right: auto;
}

我的网页：

总而言之，我想将顶部div的阴影（写为Listen。享受..）放到下面的div（菜单）下面。我怎么能这样做？

Answer 1

你不需要使用绝对定位。我不确定为什么相对定位对你不起作用。要使用z-index，您需要使用绝对，相对或静态位置。 这是工作代码，在你的css文件中替换div＃menu。

div#menu{
    text-align: center;
    font-size: 120%;
    background-color: #FFA700;
    padding: 0.1%;
    height: 20%;
    width: 49%;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    z-index:-1;
}

编辑1： 你必须在这里使用相对位置，因为z-index不会起作用。

这是一个工作的JSFiddle：http://jsfiddle.net/pezrwv0z/3/

编辑2： 其他可以在代码中改进的东西。 而不是margin-left：auto;保证金右：自动;使用

margin:0 auto ;

以div为中心。

height:20%;

您无法以％为单位给出高度值，而是使用像素（px）。例如：身高：50px;

编辑3： 似乎链接不能在负z-index的容器中工作。 这是更新的小提琴。 http://jsfiddle.net/pezrwv0z/3/

Answer 2

尝试将div＃menu更改为 - 应该这样做：

div#menu {
text-align: center;
font-size: 120%;
background-color: #FFA700;
padding: 0.1%;
height: 20%;
width: 49%;
margin-left: auto;
margin-right: auto;
/* add these */
margin-top: -10px;
/* z-index: 3; - this was the wrong way around, ignore this line :) */
z-index: -1;
}

编辑：在保证金顶部不太确定 - 可能更适合在口号div上更改保证金 - 再次，您选择的负值。