day41--webday03
元素的定位方式
-
静态定位: position:static;
-
相对定位: position:relative;
-
绝对定位: position:absolute;
-
固定定位: position: fixed;
-
浮动定位: float:left/right
静态定位(文档流定位)
-
格式: position:static; (默认的定位方式)
-
特点: 元素以左上为基准, 块级元素从上往下排列,行内元素从左向右依次排列, 默认情况下 无法实现元素的层叠效果
-
如何控制元素的位置?
通过外边距控制元素的位置
相对定位
-
格式: position:relative;
-
特点: 元素不脱离文档流(仍然占着原来的位置) ,可以实现元素的层叠效果
-
如何控制元素的位置?
通过left/right/top/bottom 控制元素的显示位置,参照物是初始位置
-
应用场景: 当希望移动某一个元素其它元素不受影响时使用相对定位, 相对定位可以实现元素的层叠
绝对定位
-
格式: position:absolute;
-
特点: 元素脱离文档流(不占原来的位置),可以实现元素层叠
-
如何控制元素的位置?
通过left/right/top/bottom控制位置,参照物为窗口或某一个上级元素(需要在上级元素中添加position:relative作为参照物)
-
应用场景: 当需要往页面中添加一个元素并且不影响其它元素的显示位置,并且可以实现层叠效果
固定定位
-
格式: position:fixed;
-
特点: 脱离文档流
-
如何控制元素的位置?
通过left/right/top/bottom相对于窗口做偏移
-
应用场景: 当需要将元素固定在窗口的某个位置时使用
浮动定位
-
格式: float:left/right;
-
特点: 脱离文档流, 元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它元素时停止.
-
浮动元素一行装不下时会自动折行, 折行时有可能被卡住
-
当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给元素添加overflow:hidden可以解决此问题
溢出设置overflow
-
visible超出部分显示(默认)
-
hidden超出部分隐藏
-
scroll 超出部分滚动显示
行内元素垂直对齐方式vertical-align
-
top 上对齐
-
middle中间对齐
-
bottom下对齐
-
baseline基线对齐(默认)
元素的显示层级
