html - 并排固定 div 的 Z 排序

Question

我正在设计一个带有固定标题的网站，顶部有一个固定栏，然后是一个附加的垂直导航栏。要了解我的意思，请单击此处：http ://crag.stmarkssheffield.co.uk 这个代码看起来像

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-index放高了，那我就不能和nav bar交互了，怎么办？

Answer 1

你应该有这样的东西......

<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>

Answer 2

要解决此问题，必须使用顶部、底部、左侧和右侧 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>