資訊專欄INFORMATION COLUMN
摘要：一定位方式默認定位方式相對定位相對于該元素靜態定位的元素定位即元素所在正常文檔流的位置相對定位結果相對定位并沒有脫離文檔流只是相對于該元素以前所在的位置進行偏移絕對定位相對于除了定位以外的父元素進行定位如果父元素沒有定位就根據即瀏覽器窗口進
一.定位方式
1.position:static;默認定位方式
2.position:relateve;相對定位,相對于該元素靜態定位的元素定位(即元素所在正常文檔流的位置)
eg:
position相對定位
1
2
3
結果:
相對定位并沒有脫離文檔流,只是相對于該元素以前所在的位置進行偏移
3.position:absolute(絕對定位),相對于除了static定位以外的父元素進行定位,如果父元素沒有定位,就根據body(即瀏覽器窗口)進行定位,絕對定位的子元素是脫離文檔流的,在原文檔中不占有空間
eg:把上述例子第二個子div定位方式修改下,它的父級元素(class="container")沒有定位,所以相對于body進行定位
.div2 {
position: absolute;
top: 40px;
left: 40px;
}
結果:
4.position:fixed(固定定位),相對于瀏覽器窗口進行定位,即body
5.position:inherit;繼承父元素的定位方式
1.定義:文檔流是在 HTML 中的位置順序決定排布的過程
2.脫離文檔流的三種方式:
positon:relative; positon:fixed; float浮動
3.以上脫離文檔流會使當前元素形成一個BFC(塊級格式化上下文),對于BFC的理解,請看我之前的總結https://segmentfault.com/a/11...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117172.html
摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區域定位。 Position定位 個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。 對應了四...
摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區域定位。 Position定位 個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。 對應了四...
摘要：最近在慕課網學習了網頁布局基礎和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細講解了中的用法，在此把學習筆記分享給大家。 最近在慕課網學習了 網頁布局基礎 和 固定層效果 ，都是由聲音甜美的 婧享人生 老師所錄制，視頻詳細講解了CSS中position的用法，在此把學習筆記分享給大家。 CSS定位機制 標準文檔流（Normal flow） 浮動定位（Floats） 絕對定位...
摘要：元素的位置通過以及屬性進行規定。生成相對定位的元素，相對于其正常位置進行定位。規定應該從父元素繼承屬性的值。表示相對原先位置右邊進行偏移，表示相對原先位置下邊進行偏移。當和同時存在，僅有效，當和同時存在僅有效。 定義和用法 position屬性規定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。...
閱讀 1385·2021-11-25 09:43
閱讀 3606·2021-11-10 11:48
閱讀 5179·2021-09-23 11:21
閱讀 1610·2019-08-30 15:55
閱讀 3519·2019-08-30 13:53
閱讀 1247·2019-08-30 10:51
閱讀 880·2019-08-29 14:20
閱讀 1986·2019-08-29 13:11
