实例详解CSS中position的fixed属性使用

fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position的absolute属性来定位该层，你会发现absolute属性并不能达到你想要的css效果，。这时，就需要要用到fixed属性来定位该层了，当然，你如果不想用fixed属性的话，你是可以使用JavaScript语句来代替的。

1. <div class="div1">层1</div>
   <div class="div2">层2</div>

2. 写对应的css代码，我们先不加fixed属性试试：

3. .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

http://v3.bootcss.com/examples/navbar-fixed-top/