CSS滾動和Z-index

Question

我目前正在將設計布局到網頁上，該網頁的頂部有一個水平條，底部有一個陰影，下面有2個div設置為overflow：scroll;

通常看起來像這樣： 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頂部的z索引設置為5，將左側的z索引設置為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：body {margin：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 個解決方案

解決方案1
0 已采納 2014-11-22 23:33:31

CSS滾動和Z-index

問題描述

1 個解決方案

解決方案1 0 已采納 2014-11-22 23:33:31

解決方案1
0 已采納 2014-11-22 23:33:31