Css Position小结

position 属性规定元素的定位类型,值主要有static、relative、absolute、fixed。

1.static(默认值)

//css Code
.static {
  position: static;
  top:100px;//设置距离顶部100px，不起作用
}

2.relative（相对定位）

//css Code
.relative1{
    position: relative;
    border: 1px solid rgb(17, 16, 16);
}
.relative2{
    position: relative;
    top: 0px;
    left: 20px;
    background-color: white;
    width: 500px;
    height: 100px;
    border: 1px solid rgb(17, 16, 16);
}

3.flxed(固定定位)

position属性是flxed的元素，不占文档流的位置（脱离文档流）

//css Code
.flxed{
    position:fixed;
    bottom: 100px;
    right: 0;
    width: 200px;        
    background-color: rgb(228, 171, 171);
    height: 130px;                
}

4.absolute(绝对定位)

absolute的显示效果和flxed差不多，区别在于flxed是相对视窗定位，absolute是相对最近的“被定位”的祖先元素，如果绝对定位的元素（position属性的值是absolute）没有“被定位”的祖先元素，它就相对于body元素定位，会随着页面滚动而滚动。“被定位”的元素是指position属性的值不是static的元素

//css Code
.absolute{
    position:absolute;
    top: 30px;
    right: 0;
    width: 160px;
    height: 120px;
    border: 1px solid red;
}

以上就是css position相关介绍

Css Position小结

原文：https://www.cnblogs.com/wuyunblog/p/10926838.html