Position定位

小軒雪發表於2018-07-03

position：static(預設) | relative | absolute | fixed | sticky(CSS3)

適用於：除display屬性定義為table-column-group | table-column之外的所有元素

  • relative: 參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移

  • absolute: 參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。

  • fixed: 偏移定位是以視窗為參考

一個水平垂直居中的例子：

<div style="height:200px;width:200px;background:#e37;position:  relative;">
	<div style="height:20px;width:20px;background:#000;position:  absolute;top: 50%;left:  50%;margin-top:  -10px;margin-left:  -10px;"></div>
</div>
複製程式碼

相關文章