Web前端（四）-元素定位方式（静态定位、相对定位、绝对定位、固定定位+浮动定位）
-
-
浮动定位
静态定位(默认)
-
格式: 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解决
-
应用场景: 将纵向排列改成横向排列时使用
