html網(wǎng)頁使用position定位的方法

閱讀量： 6 發(fā)布日期： 2022-10-27 15:42:19

1、網(wǎng)頁定位樣式的選擇

定位樣式的選擇：首先，我們要確定我們的目標元素的定位樣式。定位樣式有 static、relative、absolute、fixed 四種。定位的基本概念：靜態(tài)定位：不使用任何定位屬性，元素出現(xiàn)在正常的文檔流中。相對定位：與靜態(tài)定位相反，元素會相對自己的默認位置偏移。絕對定位：元素會完全脫離文檔流，相對于定位父級進行定位。固定定位：元素會完全脫離文檔流，相對于視口進行定位。定位元素的前提是設置父元素的 position 值，如果沒有設置，父元素默認為 static ，子元素所有的定位都是相對于文檔流定位。

2、position屬性的使用

當我們想要對某個元素進行定位時，我們需要使用position屬性。通常有四個值：static、relative、absolute和fixed。默認值為static，如果沒有設置position屬性，元素將處于正常的文檔流中。static：正常文檔流，元素排列正常，偏移量無效。relative：相對定位，相對于其正常位置進行定位，因此，如果沒有設置top, bottom, left 或right屬性，元素將保持其正常位置。absolute：絕對定位，相對于最近的已定位祖先元素進行定位。如果元素沒有已定位的祖先元素，則相對于包含塊進行定位。fixed：絕對定位，相對于瀏覽器窗口進行定位，元素將始終處于窗口的視圖中。

3、position定位值有哪些

HTML中的position屬性有4個值，分別是static、relative、absolute和fixed。static：靜態(tài)定位，元素按照正常的方式排列。relative：相對定位，元素按照正常的方式排列，但是當元素設置了top,bottom,left,right等屬性時會相對于其正常位置偏移。absolute：絕對定位，元素定位相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，則相對于元素。fixed：固定定位，元素定位相對于瀏覽器窗口。

4、html網(wǎng)頁使用position定位的方法

定位樣式的選擇：當我們想要精確定位一個元素時，我們通常會選擇使用position定位。首先，我們來了解一下 position 屬性的取值。position 屬性的取值有四個：static：默認值，沒有定位，元素出現(xiàn)在正常的流中（塊屬性元素會另起一行放置）。relative：相對定位，相對于其正常位置進行定位。元素的位置會被偏移，但是文檔的布局并沒有變化。元素會保留它原有的位置，只是相對它原有位置偏移了。absolute：絕對定位，元素脫離文檔流，并且通過 left 、 top 、 right 、 bottom 屬性定位，元素的位置是相對于最近的已定位祖先元素。如果元素沒有已定位的祖先，那它的位置相對于最初的包含它的容器，也就是 body 元素。

作者: bosscms，轉(zhuǎn)載時必須經(jīng)得同意并以鏈接形式注明作者和原始出處及本聲明。

CSS樣式