如何在不改变其位置的情况下将div与另一个div重叠- Css

Question

我的网页顶部有两个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#menu{
    text-align: center;
    font-size: 120%;
    background-color: #FFA700;
    padding: 0.1%;
    height: 20%;
    width: 49%;
    margin-left: auto;
    margin-right: auto;
}

我的网页：

​

​

总之，我想把最上面的div的阴影(这是写听。享受..)到下面的div (即菜单)。我该怎么做？

Answer 1

你不需要使用绝对定位，我不知道为什么相对定位不适合你。要使用z索引，您需要使用绝对、相对或静态位置.下面是工作代码，将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-索引不起作用。

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

编辑2:代码中可以改进的其他东西。代替边距-左:自动；边距-右:自动；使用

margin:0 auto ;

对着中心。

height:20%;

不能以%为单位给高度赋值，而是使用像素(px)。身高:50 eg；

编辑3:似乎链接在负z索引的容器中不起作用。这是最新的小提琴。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 -再一次，一个负的价值，你的选择。