Web前端（四）-元素定位方式（靜态定位、相對定位、絕對定位、固定定位+浮動定位）

元素定位方式

• position定位: 靜态定位,相對定位,絕對定位,固定定位
• 浮動定位

靜态定位(預設)

• 格式: 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;
• 特點: 脫離文檔流, 元素從目前所在行向左或向右浮動,當撞到上級元素邊緣或其它浮動元素的時候停止
• 浮動元素一行裝不下的話會自動換行, 換行時有可能被卡住