CSS position属性总结

$position$属性有四个值：
$1.$ static 默认值，无定位，无top，bottom，left，right设定值效果

.static{
    background-color: skyblue;
    position: static;
    width: 360px;
    height: 360px;
}

$2.$ absolute，根据top bottom left right设置值以absolute或relative或body作为标准进行位置确定

.absolute{
    background-color: skyblue;
    position: absolute;
    width: 240px;
    height: 240px;
    right: 80px;
    bottom: 60px;
}

$3.$ relative 相对于static，具备top bottom left right的设定，同时可以让子元素根据他的位置去定位

.relative{
    background-color: skyblue;
    position: relative;
    width: 360px;
    height: 360px;
    top: 60px;
    left: 150px;
}

$4.$ fixed 对于页面，即使滚动该具备该属性的元素也不会移动，如果设置了top bottom left right，则会在滚动后最远停留在滚动位置，而不会超出设定的位置

.fixed{
    background-color: skyblue;
    width: 240px;
    height: 240px;
    left: 80px;
    bottom: 60px;
}