CSS中的定位可以使用相對定位、絕對定位和固定定位。而相對定位,是相對于當前元素的位置進行調整。
.parent{ position:relative; } .child{ position:relative; left:20px; top:10px; }
上述代碼中,我們給父級元素設置了相對定位,即position:relative;然后,在子級元素中,我們使用了left和top這兩個屬性來讓其在水平和垂直方向上移動了20px和10px。
.parent{ position:relative; width: 300px; height: 200px; } .child{ position:absolute; bottom: 0px; right: 0px; }
上述代碼中,我們依舊使用了相對定位,同時設置父級元素的寬高。然后,在子級元素中,我們使用了absolute絕對定位,并將其position屬性設為bottom:0px和right:0px使其貼著父級元素的右下角。
需要注意的是,使用相對定位時,元素雖然在頁面上移動了位置,但是它所占據的位置并沒有改變。因此如果有其他元素需要占據移動后這個位置時,可能會重疊。
上一篇css直角三角形容器
下一篇css相對于父div定位