CSS定位

• relative相对定位
• absolute绝对定位
• fixed和sticky及zIndex

relative相对定位

position特性：css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

position取值：static( 默认) | relative | absolute | fixed | sticky

relative相对定位

如果没有定位偏移量，对元素本身没有任何影响，不使元素脱离文档流，不影响其他元素布局，left、top、right、bottom 是相对于当前元素身身进行偏移的。

html代码

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

css代码    

<style>
        div{width: 100px;height: 100px;}
        #box1{background: #F00;}
        #box2{background:blue;position: relative;left:100px;top:100px;}
        #box3{background: yellow;}
</style>

 浏览器显示：

   

absolute绝对定位

使元素完全脱离文档流，内联元素支持宽高(让内联具备块特性)，块元素默认宽根据内容决定（让块具备内联的特性）；如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）。