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）先创建原始的三个盒子

 结果：

（2）给第二个盒子加上相对定位position：relative；

 结果：

结果总结： 结果显示第二个盒子确实相对于它原来的位置，距离top100px，距离left100px的位置显示，而且第二个盒子动，第三个盒子不受影响，不会跑到第二个盒子原来的位置，是因为虽然第二个盒子跑到了现在的位置，但是它原来的位置它还占着位，举个例子：比如说你今天去你姑姑家住了，但是你家还是有你的房间呀，所以第三个盒子它上不去。

②绝对定位代码演示：position：absolute；

首先演示的是没有父标签的盒子的绝对定位，参照物是浏览器

（1）先创建一个没有父体的盒子

 结果：

 （2）绝对定位演示：

 结果：

结果总结：在没有父盒子的情况下，参照物是浏览器的左上角，代码的含义是相对于top向下移动100px，相对于left向右移动100px

（3）当我们在网页上放一些文字的时候，看看效果如何

结果：

结果总结：结果发现当我们放上文字的时候，最后一行文字其实是显示在这个红色盒子下面的，就是说当我们设置了绝对定位，无论它前后左右有什么东西，这个红色盒子都是算是飘（固定）在上面的，也就是当我们设置了绝对定位，这个盒子就脱离了文档流，就像我们上面刚开始举的那个广告在那个位置固定，而且文章的字都在它下面显示的那个样子。还有一个更加强有力的佐证，当我们把这个文字div标签放在代码

下面，发现结果文字还是在最上面显示：

结果：

 

接下来演示的是有父盒子的子盒子的绝对定位

（1）先创建一个父盒子和子盒子

 结果：

（2）绝对定位演示：

我们先让盒子在中间显示，以便于排除以左上角为参照物的嫌疑

 结果：

 结果总结：要是想让子盒子以父盒子为参照物，就需要给父盒子也加上定位，一般父盒子加上相对定位，而且不用设置top等属性，这时候当子盒子再设置绝对定位时，就是以父盒子为参照物了。

③固定定位

固定定位的跟上面代码一样，将position后面改为fixed就行了，但是注意一点：我们上面举的那个广告在右下角定位的例子，其实理论上是可以用绝对定位的，肯定能用固定定位，但是绝对定位只将广告固定在第一屏，也就是说我们一个网页，肯定有滚动条，很长的网页，当我们将滚动条往下滚滚出第一屏时，那个广告就自然就会跟着第一屏上去了，不会在原来的位置固定不变的，但是我们的固定定位就是一直在一个位置固定，不会有第几屏第几屏的限制。

④粘性定位

代码演示：

我设置了三个盒子一个header部分、一个nav部分、一个body部分，我希望当我将滚动条往下滚得时候中间nav部分就会粘在顶部 

 结果：

 代码演示：想让nav部分粘，就在nav的css身上加

 结果：

 结果总结：nav的css里面的top：0%的含义是，让这个nav部分距离顶部向下多少的距离粘住，结果发现当前结果就是当你滚动滚动条，红色的部分就粘在顶部不动。

✍定位层级：z-index：数值；属性值越大，层级越大，越靠上显示

代码演示：

 结果：结果如下面所见，第一个盒子盖在了第二个盒子上

当我们给第二个盒子也加上相对定位的属性，但是不设置top等属性，看看结果如何：

代码：

 结果：

结果发现第二个盒子盖在了第一个盒子上面，这就是后来者居上的道理。

但是如果我们的需求是虽然两个盒子都设置了相对定位，但想让第一个盒子显示在上面，怎么办呢，这时候就用到我们的要说的层级：z-index：数值；这个属性啦。看下面代码让第一个盒子显示在上面：

 结果：

属性介绍：z-index：数值；这个属性的属性值可以设置正值也可以设置负值，数值越大越靠上显示。按照上述的代码我们将第一个盒子设置了z-index的属性，如果给第二个盒子也设置这个属性，那么比较的是这个属性的属性值，谁的属性值越大谁就在上面显示，比如第二个盒子设置了z-index：300；比第一个盒子的100要大，那么第二个盒子就在第一个盒子上面显示。

注意点：z-index只有当前面应用了定位才能生效

✍：绝对定位的特殊情况

（1）z-index在绝对定位有父盒子的情况下不生效

代码：

 结果：

结果总结：本来创建一个子盒子和一个父盒子，子盒子是显示在父盒子上面的，但是我们想让父盒子显示在子盒子上面，所以我们就给父盒子加了z-index的属性，但是发现不起作用，所以说z-index在绝对定位有父盒子的情况下不生效。但如果想要将父盒子显示在子盒子上面该怎么做呢。解决办法：不在父盒子身上加z-index属性，在子盒子身上加z-index属性，并设置成负值。

（2）绝对定位可以将行内元素设置成块级元素

 结果：

结果总结：span标签是一个行内标签，没办法设置宽和高，设置了也不显示，但是加上绝对定位以后就可以由行内元素转化为块级元素，设置宽和高就可以显示了。

这里总结一下：

将行内元素转化为块级元素的方法一共有三种：

（1）加display：block；（2）加position：absolute；（3）加float：left

✍定位实现将盒子水平垂直居中显示：

之前我们可以用margin：0 auto；实现水平居中显示，这次我们可以用定位实现水平垂直居中显示：

（1）只有一个盒子时，实现水平垂直居中显示

思路：

 我们先让这个盒子在屏幕的50% 50%处显示，也就是上面这个图，盒子在top的50%处，在left的50%显示，然后再将盒子显示在自己原来位置的一半处，也就是top和left的属性值是负数。见下图：

 代码：现在50% 50%处显示

 结果：

 代码：将50% 50%位置的图形显示在屏幕中间，就是将原来的盒子往左上角返回盒子自身的一半

 结果：

（2）有父盒子时，水平垂直居中显示

代码：先创建两个盒子，父盒子和子盒子，让他们水平居中显示

 结果：

 再给父盒子设置相对定位，给子盒子设置绝对定位，然后按照上面的方法来一遍

结果：

 纠正一个错误想法：

 下面的margin--left和margin-top不能设置成-50%，不然就错了。

---

浮动和定位的区别：

代码演示：浮动

 结果：

 结果显示，第一个盒子浮动起来了，第二个盒子上去了，但是第二个盒子身上的内容环绕第一个盒子显示。

下面我们看定位的：

 结果：

 结果显示，第一个盒子绝对定位了，第二个盒子上去显示了，但是文字也被第一个盒子给挡住了，所以这就是浮动和绝对定位的区别

总结：

 

最后说一个小的知识点：图片透明度的属性设置：opacity：数值；（0是完全透明，1是完全不透明）