CSS-position

一、position的作用

position属性就是用来指定一个元素在网页中的位置。一共有五个属性。

• relative

• absolute

• fixed

• static

• sticky

二、static属性

static是一个默认值。它将不能使用 top、bottom、right、left、z-index属性。

 .fx{ 
     position: static;
     left: 100px;
 }

此时 left值是没有反应的。不能使用

三、relative属性

relative表现的和 static是一样的。但是 relative是可以使用top、bottom、right、left。偏移到其它位置。

 .fx{
     position: relative;
     left: 100px;
}

fx向右偏移100像素(距离左边100px)。

四、absolute属性

absolute一般是相对于上级(父级)进行偏移，如果没有父级，那么它就是相对于body进行定位。必须搭配 top、bottom、right、left。

 .fx{ 
     position: relative;
 } 
  
.fv{ 
     position: absolute;
     top: 20px;
}

父元素 relative、子元素 absloute，相对于父级顶部向下偏移20px进行定位，如果父元素是 static定位则会距离网页的顶部向下偏移20px~~。~~

五、fixed属性

就是固定定位,fixed类似于 absolute它可以将元素放置在相对于文档的任何位置，不会受滚动影响(固定在一个位置)。它是相对于浏览器窗口进行偏移。它也是搭配top、bottom、right、left、一起使用。

六、sticky属性

这个属性还是很有意思的，sticky就像 relative和 absolute的结合,一些时候是 relative定位，另一些时候自动变成 fixed定位。必须搭配top、bottom、right、left、一起使用。很强有没有......

核心代码就一句：

 div{ 
     position: sticky;
     top:20px;
}