CSS中的相對定位和絕對定位是我們在布局中經常會使用到的兩種定位方式。相對定位指的是元素相對于它的原始位置進行偏移,而絕對定位則指的是元素相對于它的父元素進行定位。下面我們就來分別介紹一下相對定位和絕對定位。
/* 相對定位 */ div { position: relative; left: 50px; top: 50px; } /* 絕對定位 */ div { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background-color: red; padding: 10px; color: #fff; }
相對定位是通過修改元素的left和top屬性來實現偏移的。在上面的代碼中,我們將一個div元素的位置向右移動50px,向下移動50px,來實現了相對定位。常用的相對定位情境為:為元素設置偏移,實現微調、局部調整等效果。
絕對定位需要在元素的父元素上設置position屬性為relative或absolute,然后通過設置元素的left和top屬性來實現相對定位。在上面的代碼中,我們將一個div元素的左邊緣和上邊緣定位到距離父元素左邊緣50px,距離父元素上邊緣50px的位置,因此該元素會相對于父元素進行定位。常用的絕對定位情境為:實現浮動、懸浮、重疊樣式效果等。