Question

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

示例:(查看小于和大于标志）：http://jsfiddle.net/dbough/tASs2/

我试图用位置“固定”两个元素：固定，但它会导致元素一起折叠

寻找如何使这项工作的方向。

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%;
}

Answer 1

将position:absolute提供给箭头课程，将relative提供给父级#container

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

<强> DEMO

对于固定箭头

在relative div中使用fixed div并将子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
}

<强> DEMO 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
}

<强> DEMO 3

Answer 2

使用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%;*/
}

Answer 3

在＃nav-right而非margin-right使用固定版本：10％但右：10％。

在内容的左侧和右侧浮动导航元素

3 个答案: