CSS中定位属性的常见属性值

CSS中定位属性的常见属性值

在使用CSS对页面布局时，我们常会使用到定位属性，定位主要应用于一个元素在另外一个元素之上，或者我们需要在网页中精准地确定某一个元素的位置，并且这个元素有明确的参照物。其常见的属性值有五个：

一、position：static；默认值

默认值通常没有任何布局效果，定位中的static也是这样的存在。

二、position：absolute；绝对定位

绝对定位就是我们较常使用的一个属性值了，其特点如下：

1、脱离文档流：也就是当一个元素被加上绝对定位之后，该元素便悬空了，并不占空间，下面的元素如果没有定位则会顶到上面，占据其空出来的位置，但元素本身视觉上仍在原来的位置，后来居上的元素相当于站在其身后，原有的字符也被挡住。当然如果多个元素同时给了绝对定位，他们之间的层叠顺序是：谁的结构在后谁显示在最上面。

 .box1{
    width: 100px;
    height: 100px;
    position: absolute;
    background: greenyellow;
   }
.box2{
    width: 150px;
    height: 150px;
    position: absolute;
    background: skyblue;
   }

两个色块都没有加定位---------->给box1添加绝对定位---------->两个色块都加绝对定位

2、元素移动位置时的参照物：绝对定位之后想要移动位置，可以用margin或者用left、top、bottom、right属性移动位置，移动时参照物为浏览器的第一屏，需要注意的是，当设置right=100px;指的是当前被定位的元素距离浏览器第一屏最右边的距离为100px。如下图：

但若是该元素有父元素且父元素也设置了定位（绝对、固定、相对均可），那么它移动时参照物就是父元素了。也就是当设置 right=100px;指的是当前被定位的元素距离其父元素最右边的距离为100px。

如果想要改变定位之后这些元素的层叠顺序，可以通过z-index属性改变，z-index值默认为0，值越大层越靠上，没有最大值也没有最小值。

三、position：fixed；固定定位

固定定位也是我们较常使用的一个属性值，其特点如下：

1、给元素固定定位以后一样会脱离文档流，但与绝对定位不同的是该元素会固定在某个位置不动，就是不论你如何滚动屏幕，该元素都固定不动。

2、用top、left、right、bottom移动位置的时候含义同绝对定位，但是参照物只会是浏览器的当前窗口。

3、多个元素同时给了固定定位，默认后面写的元素会盖在最上面，当然固定定位的层叠顺序也可以用z-index改变。

四、position：relative；相对定位

相对定位也是我们较常使用的一个属性值，其特点如下：

1、不脱离文档流，相对定位之后，该元素仍然占据原有的位置。这对于位于其后的元素布局是很有必要的。

2、与其它定位更为不同的是，相对定位的元素利用left、top、bottom、right移动位置的时候参照物是自己的初始位置，而且移动位置之后，原来的空间还在。

3、多个元素给完相对定位之后，如果没有移动位置，那么他们之间就不会覆盖现象。也可以通过z-index改变层叠顺序。

五、position：sticky；粘性定位

CSS3新增属性值，兼容性较差，可用来做导航的吸顶效果

【注】：我们通常看到的网页导航栏居于网页头部下方，并且随着屏幕的滚动可以看到网页下面的内容，而在浏览下方内容的同时导航栏或者搜索栏会被吸附在浏览器顶端不动。这样的效果我们称为吸顶效果。