这篇文章已经发布超过一年了,内容可能已经过时,请谨慎参考。
定位
相对定位
/* 相对定位,没有脱离文档流,会给他预留空间,受 top,left 等影响 */
.element {
position: relative;
top: 20px;
left: 20px;
}绝对定位
/* 绝对定位,脱离文档流,不会给他预留空间,受 top,left 等影响 */
.element {
position: absolute;
top: 20px;
left: 20px;
}固定定位
/* 固定定位,脱离文档流,不会给他预留空间,受 top,left 等影响,但是相对于浏览器窗口 */
.element {
position: fixed;
top: 20px;
left: 20px;
}粘性定位
/* 粘性定位,脱离文档流,不会给他预留空间,受 top,left 等影响,但是相对于浏览器窗口 */
.element {
position: sticky;
top: 20px;
left: 20px;
}