0

我试图在某些内容的两侧浮动两个“导航”元素。当用户向下滚动页面时，这些元素应该保持原位（并且可见）。

示例：（见小于和大于符号）：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 内使用fixeddiv 并通过以下方式对齐子 divposition: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

或者用简单的方法直接position:fixed给子 div 并删除外部 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///属性，而不是使用bottomor边距。请参阅有关position的 W3C CSS 规范。rightleftfloat

见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

用于 #nav-right 的固定版本，而不是 margin-right:10% 但 right:10%。

于 2013-01-30T11:34:53.380 回答