1. 首頁
  2. 問答
  3. 爲什麼Z-index在這裏不起作用？

爲什麼Z-index在這裏不起作用？

2013-01-02 38 views
1

可能重複：
z-index not working with fixed positioning爲什麼Z-index在這裏不起作用？

我創建有一個固定的頁眉和頁腳和固定左側邊欄中的應用程序。除了z-index屬性不起作用外，一切都還好。我已經將頁眉和頁腳的z-index設置爲1000，將主div的z-index設置爲1.因此頁眉和頁腳應該堆疊在.main div上。但結果並不相同。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Sample Title</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 
    <body> 
    <div class="header fixed-top"> 
     <div class="header-inner"> 
     <ul class="nav"> 
      <li> 
      <a href="#">Link 1</a> 
      </li> 
      <li> 
      <a href="#">Link 2</a> 
      </li> 
      <li> 
      <a href="#">Link 3</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <div class="sidebar-left-fixed">This is the left sidebar. This should remain fixed.</div> 
    <div class="main">And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br />And here comes the content division. 
    <br /></div> 
    <div class="footer fixed-bottom"> 
     <div class="footer-inner">footer</div> 
    </div> 
    </body> 
</html>

而這個CSS：

a{ 
color: #777; 
text-decoration: none; 
text-shadow: 0 1px 0 white; 
} 
body { 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 14px; 
line-height: 20px; 
color: #333;padding:0; 
margin:0; 
} 
ul{ 
margin:0;padding:0; 
position:relative; 
list-style-type:none; 
} 
li{float:left} 
.nav > li > a{padding: 10px 15px 10px;} 
.fixed-top{ 
position:fixed; 
top:0;right: 0; 
left: 0; 
z-index:1000; 
} 
.fixed-bottom{ 
position: fixed; 
right: 0; 
left: 0; 
margin-bottom: 0;bottom: 0; 
z-index:1000; 
} 
.header-inner{ 
border-bottom:solid 1px #eee; 
min-height: 40px; 
z-index:1000; 
position:relative; 
} 
.footer-inner{ 
border-top:solid 1px #eee; 
min-height: 80px; 
position:relative; 
z-index:1000; 
} 

.sidebar-left-fixed{ 
position:fixed; 
left:0; 
width:250px; 
border-right:solid 1px #eee; 
height:100%; 
top:40px; 
} 
.main{ 
margin-top:40px; 
margin-left:250px; 
margin-right:0; 
min-height:600px; 
border-right:solid 1px #eee; 
border-bottom:solid 1px #eee; 
padding:5px; 
z-index:1; 
position:relative; 
}

注：如果沒有得到這個設計中的一些其他的好辦法，這是值得歡迎的。

來源

2013-01-02 Hardeep Singh

+0

你是這個意思嗎？ http://jsfiddle.net/7gK5U/2/ –

回答

1

您沒有爲頁眉，頁腳和側欄部分提供任何背景顏色。否則它工作得很好。

來源

2013-01-02 08:09:40

+0

大聲笑。那很好！ –

+0

只是爲了確認這個標記是否適合這種情況或者其他更好？ –

0

它似乎工作，只是你的頁眉/頁腳沒有任何背景（顏色）。透明，你只需通過它看到內容。

如果您爲頁眉和頁腳添加背景色，您可以看到它們下面的內容。

來源

2013-01-02 07:49:33 morksinaanab

0

我認爲morksinaanab有正確的，但你也可以添加填充底部。主。 嘗試添加：

.main { 
/* Your code */ 
padding-bottom: 85px; } /* the height of padding should be at least the same amount that footer height + 5px for space */

來源

2013-01-02 08:07:56 bumerang

相關問題

 相關問題