Z-Ordering for side-side fixed divs

我正在設計一個固定標題的網站，其頂部有一個固定的欄，然後是一個垂直的導航欄，並附加到它。要明白我的意思，請點擊：http://crag.stmarkssheffield.co.uk 該代碼，這看起來像Z-Ordering for side-side fixed divs

CSS：

#top{ 
    position: fixed; 
    width: 100%; 
} 

#menu{ 
    text-align: left; 
    width: 175px; 
    border-right-style:solid; 
    border-bottom-style: solid; 
    border-color: #4d4d4d; 
    border-bottom-right-radius: 15px; 
    float: left; 
} 

#user{ 
    float: right; 
    text-align: right; 
    font-size:0.865em; 
} 
#main{ 
    padding-top: 100px; 
}

HTML：

瀏覽器認爲

<div id='top'> 
    <div style="font-size: 60px; border-color: #4d4d4d; border-bottom-style:solid; border-width:3px; background: white">ST MARKS CRAG<div style="font-size: 20px">A breath of fresh air</div></div> 
     <span id='user' style="padding-top: 0; margin-top: 0"> 
      [@usertext] 
     </span> 
     <span id="menu" style="background: white"> 
      <p>&emsp;<a href="#">Home</a></p> 
      <p>&emsp;<a href="#">My data</a></p> 
      <p>&emsp;<a href="#">About</a></p> 
      <p>&emsp;<a href="#">Members stories</a></p> 
      <p>&emsp;<a href="#">Useful Links</a></p> 
      <p>&emsp;<a href="#">Report a problem</a></p> 
      <p>&emsp;<a href="#">Contact</a></p> 
     </span> 
    </div> 
</div> 
<div id='main'> 
     <div class = "bubble"> 
       TEST 
     </div> 
</div>

現在的問題是，資產淨值酒吧呈現在主內容的前面，它緊挨着它，並且不讓我與主要內容交互。如果我將主要內容的z索引設置得更高，那麼我無法與導航欄進行交互，我應該怎麼做？

來源

2013-06-23 w4etwetewtwet

在左邊的菜單，標題應該是兩個獨立的實體，而不是連在一起就像你擁有了它 – KyleK

@ tw16我的意思我無法選擇文本或點擊鏈接。當我嘗試答案時，鏈接暫時中斷。 – w4etwetewtwet

好的。所以現在所有瀏覽器的佈局都是一樣的。但我沒有選擇「測試」文本和側邊欄上的所有鏈接工作的問題。 – tw16

爲了解決這個問題，有必要使用頂部，底部，左，右的CSS規則。修訂後的CSS是這樣的：

#header{ 
    background:white; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
    border-bottom-style: solid; 
    border-color: #4d4d4d; 
} 

#menu{ 
    background: white; 
    text-align: left; 
    width: 175px; 
    border-right-style:solid; 
    border-bottom-style: solid; 
    border-color: #4d4d4d; 
    border-bottom-right-radius: 15px; 
    left: 0px; 
    top: 94px; 
    position: fixed 
} 

#user{ 
    top: 94px; 
    text-align: right; 
    font-size:15px; 
    right: 0px; 
    position: fixed; 
}

和HTML：

<div id="header"> 
    <h1>ST MARKS CRAG</h1> 
    <h2>A breath of fresh air</h2> 
</div> 
<div id="user"> 
    [@usertext] 
</div> 
<div id="menu"> 
    <p>&emsp;<a href="#">Home</a></p> 
    <p>&emsp;<a href="#">My data</a></p> 
    <p>&emsp;<a href="#">About</a></p> 
    <p>&emsp;<a href="#">Members stories</a></p> 
    <p>&emsp;<a href="#">Useful Links</a></p> 
    <p>&emsp;<a href="#">Report a problem</a></p> 
    <p>&emsp;<a href="#">Contact</a></p> 
</div>

來源

2013-06-25 17:52:41 w4etwetewtwet

你應該有它這樣的事情，而不是...

<div id='top'> 
<div style="font-size: 60px; border-color: #4d4d4d; border-bottom-style:solid; border-width:3px; background: white">ST MARKS CRAG<div style="font-size: 20px">A breath of fresh air</div> 
</div> 

<div id='main'> 

    <div id="menu" style="background: white"> 
     <p>&emsp;<a href="#">Home</a></p> 
     <p>&emsp;<a href="#">My data</a></p> 
     <p>&emsp;<a href="#">About</a></p> 
     <p>&emsp;<a href="#">Members stories</a></p> 
     <p>&emsp;<a href="#">Useful Links</a></p> 
     <p>&emsp;<a href="#">Report a problem</a></p> 
     <p>&emsp;<a href="#">Contact</a></p> 
    </div> 

    <div class = "bubble"> 
      TEST 
    </div> 
</div>

來源

2013-06-23 20:24:07 KyleK

然後，導航欄和包含用戶文本的div不是固定的，如果我將它們設置爲固定的，則右邊的不會右移。 – w4etwetewtwet

Z-Ordering for side-side fixed divs

回答

相關問題