Question

我目前正在将设计布局到一个网页，其顶部水平条底部有阴影，下方有两个div设置为溢出：滚动;

通常情况如下：https://31.media.tumblr.com/12b6c3f5a3642440010ae86565699d41/tumblr_nfgqskuhsa1tllj9bo1_1280.png

但是左边的div覆盖了阴影部分，所以我将z-index更改为-1 现在给了我这个：https://31.media.tumblr.com/d18f3476db91b54282d9b0bf8ed08a80/tumblr_nfgqskuhsa1tllj9bo2_1280.png 这就是我想要它的样子但是左边的div不再滚动了。

我尝试将正数的z-index设为top为5，将左z-index设为4，但它不会将左div发送到背面。

如何让阴影与左边的div重叠，但是左边的div仍然可以滚动？

这是我的代码：

HTML：

</head>
<body>

<div id="top">
<div id="logo">Baby Steps</div>


</div>


<div id="left">
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>
a<br><br>THESE GO ON</div>


<div id="right"</div>

</body>
</html>

CSS：身体 { 余量：0; 填充：0; }

#top{
width: 102%;
float: left;
margin: 0 0 0 0;
padding: 0;
background-color: #41b6c4;
height:60px;    
box-shadow: 0px 5px 5px -3px #000;

}


#logo{
color:white;
font-family: 'Roboto Condensed', sans-serif;
font-size:2em;
margin:0.2em;


}


#left{
position: relative;
top: 0px;
height:100%;
width:18%;
background-color:#606061;
overflow: scroll;
}

Answer 1

您需要设置左div的z-index，并从顶部div中删除float。试试这个

body { 
 margin:0; 
 padding:0; }

#top{
 position:relative;
 z-index: 2;
 width: 100%;
 margin: 0 0 0 0;
 padding: 0;
 background-color: #41b6c4;
 height:60px;    
 box-shadow: 0px 5px 5px -3px #000;
}

#logo{
 color:white;
 font-family: 'Roboto Condensed', sans-serif;
 font-size:2em;
 margin:0.2em;
}

#left{
 position: relative;
 z-index:1;
 height:100%;
 width:18%;
 background-color:#606061;
 overflow: scroll;
}

示例http://jsfiddle.net/ysu9xhv7/1/

CSS滚动和Z-index

1 个答案: