0

上部に固定バーがあり、それに垂直ナビゲーションバーが取り付けられている固定ヘッダーを持つ Web サイトを設計しています。私が意味することを確認するには、ここをクリックしてください: 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 を高くすると、ナビゲーション バーを操作できなくなります。どうすればよいですか?

4

2 に答える 2

0

これを修正するには、上下左右の 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-25T17:52:41.360 に答える