0

コンテンツの両側に 2 つの「ナビゲーション」要素を配置しようとしています。ユーザーがページを下にスクロールしても、これらの要素は所定の位置にとどまる (および表示される) 必要があります。

例: (小なり記号と大なり記号を参照): http://jsfiddle.net/dbough/tASs2/

position:fixed を使用して両方の要素を所定の位置に「固定」しようとしましたが、要素が一緒に折りたたまれます

例: http://jsfiddle.net/dbough/tASs2/1/

これを機能させる方法の方向性を探しています。

HTML 

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
<div id="container">
    <div id="nav">
        <span id="nav_left">&nbsp;&lt;</span> 
        <span id="nav_right">&nbsp;&gt;</span>
    </div>
    <div id="content">
        SOME CONTENT
    </div>
</div>
</body>
</html>

CSS (固定位置なし)

#container{
    width:100%;
    height:100%;
    margin:auto;
    padding:auto;
    max-width: 400px;
}
#content{
    margin:auto;
    padding:auto;
}
#nav_left, #nav_right{
    max-width: 10px;
    font-size: 200%;
}
#nav_left {
        margin-left:-10%;
}
#nav_right {
    float:right;
    margin-right:-10%;
}
4

3 に答える 3

3

position:absolute矢印クラスとrelative親divに与える#container

#nav_left {
        left:0; position:absolute
}
#nav_right {
    right:0; position:absolute
}

デモ

固定矢印の場合

relativediv内でdivを使用しfixed、子divを次のように整列させます。position:absolute

HTML

<div id="nav">
           <div id="wrap"> 
               <div id="nav_left">&lt;&nbsp;</div> <div id="nav_right">&nbsp;&gt;</div>
        </div>
</div>

CSS

#nav{position:fixed;  
    width:100%; 
    height:40px;
}
#wrap{
    position:relative; 
    width:100%; 
    height:40px;
}
#nav_left {
        left:15%;
    position:absolute
}
#nav_right {
    right:15%;
    position:absolute
}

デモ2

または、簡単な方法で、子divに直接与えposition:fixed、外側のdivを削除します

HTML

<div id="nav_left">&lt;&nbsp;</div> <div id="nav_right">&nbsp;&gt;</div>

CSS

#nav_left {
        left:15%;
    position:fixed
}
#nav_right {
    right:15%;
    position:fixed
}

デモ3

于 2013-01-30T11:32:36.190 に答える
1

使用するときposition: fixedは、top/ bottom/ right/left属性も使用しfloat、 または マージンは使用しないでください。positionについては、W3C CSS 仕様を参照してください。

http://jsfiddle.net/pqbkN/を参照

この場合、矢印spanを次のように変更する必要があります。

#nav_left {
    /*margin-left:-10%;*/
    left: 2em;
    top: 1em;
}
#nav_right {
    /*float:right;*/
    right: 4em;
    top: 1em;
    /*margin-right:-10%;*/
}
于 2013-01-30T11:40:46.067 に答える
0

margin-right:10% ではなく right:10% の #nav-right で固定バージョンに使用します。

于 2013-01-30T11:34:53.380 に答える