CSS+DIV定位分析(relative,absolute,static,fixed)
各個屬性值的定義:
1、static:默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
2、relative:生成相對定位的元素,通過top,bottom,left,right的設置相對于其正常位置進行定位。可通過z-index進行層次分級。
3、absolute:生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
4、fixed:生成絕對定位的元素,相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
?
relative與absolute的主要區別:
首先,是上面已經提到過的在正常流中的位置存在與否。
其次,relative定位的層總是相對于其最近的父元素,無論其父元素是何種定位方式。如圖3:
圖中,紅色背景層為relative定位,其直接父元素綠色背景層為默認的static定位。紅色背景層的位置為相對綠色背景層top、left個20元素。而如果紅色背景層定位為absolute,則情形如圖4:
?
?
可以看到,紅色背景層依然定義top:20px;left:20px;但其相對的元素變為定位方式為absolute或relative的黃色背景層。
因此,對于absolute定位的層總是相對于其最近的定義為absolute或relative的父層,而這個父層并不一定是其直接父層。如果其父層中都未定義absolute或relative,則其將相對body進行定位,如圖5:
?
?
除top、left、right、bottom定位外,margin屬性值的定義也符合上述規則。
總結
以上是生活随笔為你收集整理的CSS+DIV定位分析(relative,absolute,static,fixed)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Juniper ex4200 端口镜像问
- 下一篇: ansible 下lineinfile详