css定位及定位和浮动的区别

 打开京东网页，你会发现当你向下滚动滚动条，绿色框里的东西会固定在上面显示，并不会随着你向下滚动滚动条就会向上走，就在固定位置显示，还有下面这个广告也是永远在这个位置固定不动，如下图：

如果我们想要让一个盒子在某个位置显示，就需要用到我们接下来要讲的“定位”，下面是定位的属性值：

✍ 属性值介绍：

①position：static；网页默认盒子按照这个属性值去布局，就是从左到右，从上到下排列和布局

②position：absolute；绝对定位，有两种方式：

（1）当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏

（2）有父元素且父元素有定位，参照物是父元素

解释（1）：看下面的有两个橙色的盒子，是兄弟关系没有父元素，这个时候他们的定位就是参照浏览器的左上角位置开始，如果第一个盒子想显示在下图的位置，第二个盒子想显示在下图第二个位置，那他们的定位描述就是：距离左侧300px，距离上面500px的地方；第二个盒子的定位描述就是：距离左侧**px，距离上面**px的地方。图如下所示：

 解释（2）：看下面有父元素的子元素盒子，当他有父元素是，他的参照物就是父元素了，如果他想显示在下面这个位置，那么他的定位描述就是：距离父盒子左侧100px，距离父盒子上面100px的地方。图如下所示：

③position：relative；相对定位，参照物是相对于自己原来的位置，比如说将一个盒子向右移5px，向上移6px，这个参照物是对于自己原来的位置，向右向上移。

④position：fixed；固定定位，就是我们上面说的广告一直在右下角显示不动的样子

⑤position：sticky；粘性定位，可以做吸顶效果，如下图所示：刚开始是没有那个“精选-猜你喜欢-智能先锋-居家优品。。。”等这一栏的东西的，当我们向下拉滚动条的时候，他后面就置顶显示在最上面了，当我们再向上拉就又没有了，所以这个置顶效果就是这里所说的粘性定位，可以做吸顶效果。GIF动画如下所示：

 定位，偏移当然离不开top left right bottom这些属性，而且这些属性值可以为负值，也就是说top：-100px是成立的

(6) position：inherit；继承父类的属性；

默认的position：static；不支持top、left、right、bottom这些属性，加上了也没用

✍定位属性演示;

①相对定位代码演示

代码演示：

（1）先创建原始的三个盒子

 结果：