实例详解CSS中position的fixed属性使⽤
fixed总是以body为定位时的对象，总是根据浏览器的窗⼝来进⾏元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进⾏定位。
当我们需要使⼀个层相对于浏览器来⾃动调整该层的位置的时候，如果你使⽤position的absolute属性来定位该层，你会发现absolute属性并不能达到你想要的css效果，。这时，就需要要⽤到fixed属性来定位该层了，当然，你如果不想⽤fixed属性的话，你是可以使⽤JavaScript 语句来代替的。css固定定位
<div class="div1">层1</div>
<div class="div2">层2</div>
写对应的css代码，我们先不加fixed属性试试：
.div1{
background-color:#FF0000;
width:100px;
height:100px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
}
下⾯我们把fixed属性加上去，为了让我们便于观察，我们让层div1的宽和⾼⾜够⼤，css代码如下：
.div1{
background-color:#FF0000;
width:2000px;
height:2000px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
}
div2相对于屏幕固定了！这就是fixed
Bootstrap⾥导航栏nav的固定⽅式也是这样，但它是使⽤navbar-fixed-top

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。