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

回答

相关问题