relative(相对定位)

• 相对于元素自身定位，定位后空间不释放

代码示例：给class名为nav-title的元素设置相对定位

.nav{
    position:relative;
}

absolute(绝对定位)

• 相对于最近的已定位的祖先元素进行定位，定位后空间释放，最深的祖先元素是body

示例：给class名为nav-content的元素设置绝对定位

.nav-content{
    /*相对于定位的祖先元素，距离左边20像素，距离顶部20像素*/
    position:absolute;
    top:32px;
    left:20px;
}

fixed(固定定位)

• 相对于浏览器窗口(window)定位,定位后空间释放

示例：设置返回顶部按钮

#top-btn{
    position: fixed;
    bottom：20px；
    left：20px；
}

sticky(粘性定位)

• 相当于relative 和 fixed 的混合,在元素处于正常文档流时，定位是relative，滑出当前浏览器窗口时，定位fixed；

示例：天猫的搜索栏

#search{
    position:sticky;
    top: 0;
    left: 0;
}