CSS中可以使用position
屬性來控制div元素的排序方式,默認情況下,div元素按照它們在HTML中出現(xiàn)的順序排列,即相對排序,通過指定position
屬性為relative
、absolute
、fixed
或sticky
,可以改變div元素的排序方式。
relative
表示相對于其正常位置進行定位,absolute
表示相對于***近的已定位祖先元素進行定位,fixed
表示相對于瀏覽器窗口進行定位,sticky
表示根據(jù)用戶的滾動位置進行定位。
如果希望讓第二個div元素在***個div元素的下方,可以使用以下CSS代碼:
div { position: relative; } div:nth-child(2) { position: absolute; top: 100%; left: 0; }
在這個例子中,第二個div元素被設(shè)置為***定位,并且它的top
屬性值為100%,這意味著它將在***個div元素的下方,它的left
屬性值為0,這意味著它將在左側(cè)與***個div元素對齊。
需要注意的是,***定位的元素會脫離文檔流,因此它們不會受到其他元素的影響,它們的尺寸和位置也不會受到瀏覽器窗口大小變化的影響,***定位的元素仍然會受到其父元素的影響,因此如果父元素的尺寸或位置發(fā)生變化,***定位的元素也會相應(yīng)地發(fā)生變化。