網頁布局中position定位講解

2022-02-23

工具/材料

Adobe Dreamweaver CS5

01
相對定位(relative)是非常容易掌握的概念，通俗一點就是正常的塊級定位，只不過塊級的位置是通過top、left、right、bottom屬性來進行規定。不過，原來所占用的空間并沒有消失。首先先來正常的定位，如下圖。
02
然后在正常定位的里面，利用position：relative來相對定位，relative屬性值的父元素就是上圖塊元素，如下圖。
03
絕對定位(absolute)第一個特征就是會從文檔流中脫離，不占據任何空間。它的定位屬性也是跟相對定位一樣，通過top、left、right、bottom來進行規定，如下圖。
04
一個父元素里面包含多幾個絕對定位，如果絕對定位元素重疊在一起，如下圖，A和B重疊在一起了，需要A在前面B在后面，我們只需要在A里面添加z-index來控制。

，我們可以利用z-index來控制哪個在前，哪個在后，如下圖。
05
但是一定要切忌，如若屬性值為absolute，那么一定要配合relative為父元素的塊來使用。如果沒有配合，如下圖。會直接以body為父元素。
06
靜態定位(static)一般不使用，它的屬性值定義為沒有定位，元素出現在正常的流中。忽略top, bottom, left, right，如下圖。
07
固定定位（fixed）屬性值的定義為瀏覽器窗口進行定位。通俗一點就是父元素為body，通過top, bottom, left, right來控制位置。如下圖定位在relative里面，然而并沒有效果。

注意：屬性值不同所產生的效果不同哦

詞條內容僅供參考，如果您需要解決具體問題
（尤其在法律、醫學等領域），建議您咨詢相關領域專業人士。