-
-
浮動定位
靜態定位(默認)
-
格式: position: static;
-
靜態定位也稱為文檔流定位
-
特點: 元素以左上為基准依次平鋪開,不能實現層疊效果
-
如何控制元素位置?
通過外邊距margin來控制
相對定位
-
格式: position: relative;
-
特點: 元素不脫離文檔流
-
應用場景: 當需要移動某個元素 又不想讓其它元素受影響時使用
-
如何控制元素位置?
通過left/right/top/bottom 相對於元素初始位置做偏移
絕對定位
-
格式: position:absolute;
-
特點: 元素脫離文檔流
-
如何控制元素位置?
通過left/right/top/bottom 相對窗口(默認)或某個上級元素做位置偏移(需要在上級元素中添加 position:relative)
-
應用場景: 當需要往頁面中添加一個元素,並且不影響其它元素的顯示效果時使用
固定定位
-
格式: position:fixed;
-
特點: 元素脫離文檔流
-
如何控制元素位置?
通過left/right/top/bottom 相對於窗口做位置偏移
-
應用場景: 當需要將內容固定在窗口某個位置的時候使用
浮動定位
-
格式: float:left/right;
-
特點: 脫離文檔流, 元素從當前所在行向左或向右浮動,當撞到上級元素邊緣或其它浮動元素的時候停止
-
浮動元素一行裝不下的話會自動換行, 換行時有可能被卡住
-
當元素的所有子元素全部浮動時,自動識別的高度為0 , 識別高度為0會導致頁面顯示異常, 通過給上級元素添加overflow:hidden解決
-
應用場景: 將縱向排列改成橫向排列時使用