Css Position小结

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

1.static(默认值)

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

static的示例

该元素position属性值是static，元素出现在正常的文档流中（忽略 top,bottom,left,right 或者 z-index 声明）

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);
}

relative的示例

该元素position属性值是relative，使用relative1类，没有添加额外的属性，如top,right。此时relative的显示效果和static是一样的；

该元素position属性值是relative，使用relative2类，设置left：20px，向左偏移20px；也可设置top,right属性值，使其偏离正常位置。

3.flxed(固定定位)

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

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

flxed的示例：请看视窗的右下角

该元素position属性值是flxed，使用flxed类，相对于视窗定位，本次示例设置距离底部100px，距离右0；即使页面滚动，也会停留在相同的位置（页面右下角）

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;
}

相对于“被定位”的祖先元素的absolute的示例

该元素是“被定位”的祖先元素，position属性的值是relative

该元素position属性的值是absolute，是绝对定位元素，它相对于“被定位”的祖先元素，距离右0px，距顶部30px

相对于body元素的absolute的示例,请看页面右上角

该元素是绝对定位元素，它没有“被定位”的祖先元素，所以是相对于body元素定位，会随着页面滚动而滚动

以上就是css position相关介绍