1

ユーザーがメニューの項目をクリックすると、指定されたリンク先に移動するように、アンカー リンクを作成しようとしています。私のメニューは 3 つの項目 (1、2、3) で構成されています。たとえば Three をクリックすると、Three にジャンプしますが、その見出しはヘッダーの下に表示されます。どうすればそれを防ぐことができますか? ユーザーが見出しを表示できるようにしたい。ヘッダーを固定し、コンテンツをヘッダーの後ろにスクロールしたいことに注意してください。

HTML:

<body>
<header>
    <nav>
        <ul>
            <li><a href="#one">One</a></li>
            <li><a href="#two">Two</a></li>
            <li><a href="#three">Three</a></li>
        </ul>
    </nav>
</header>

<section>
    <div id="one">
        <h1>One</h1>
        <p>Text...</p>
    </div>
    <div id="two">
        <h1>Two</h1>
        <p>Text...</p>
    </div>
    <div id="three">
        <h1>Three</h1>
        <p>Text...</p>
    </div>
</section>

<footer>
</footer>
</body>

CSS:

body {
    background-color: #cf8;
}

header {
    background-color: #000;
    height: 4em;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

nav ul {
    list-style: none;
}

nav ul li {
    margin-top: 0em;
    padding: 5px;    
    float: left;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

section {
    height: auto;
    width: 50%;
    margin-top: 4em;
    margin-left: 25%;
}

#one,#two,#three {
    margin-top: 1em;
}

div {
    background-color: #c00;
    height: auto;
    width: 100%;
}

footer {
    background-color: #000;
    height: 2em;
    width: 100%;
    clear: both;
}

JSFIDDLE、JSFIDDLE (バージョン 2)

JSFIDDLE (フルスクリーン)、JSFIDDLE (フルスクリーン (バージョン 2))

4

3 に答える 3

0

<nav>-tagの場合、インライン スタイルを次のように定義します。style="z-index:1; position:absolute;"

と

<section>-tagの場合、インライン スタイルを次のように定義します。style="z-index:2; position:absolute;"

この場合、セクション-tagのコンテンツはナビゲーションメニューの上に表示されます。

于 2013-10-20T18:09:17.380 に答える