元素的定位（方式五种定位方式）:
- 静态定位: position:static;
- 相对定位: position:relative;
- 绝对定位: position:absolute;
- 固定定位: position: fixed;
- 浮动定位: float:left/right
静态定位(文档流定位)
- 格式: position:static; (默认的定位方式)
- 特点: 元素以左上为基准, 块级元素从上往下排列,行内元素从左向右依次排列, 默认情况下 无法实现元素的层叠效果
- 如何控制元素的位置? 通过外边距控制元素的位置
相对定位
- 格式: position:relative;
- 特点: 元素不脱离文档流(仍然占着原来的位置) ,可以实现元素的层叠效果
- 如何控制元素的位置? 通过left/right/top/bottom 控制元素的显示位置,参照物是初始位置
- 应用场景: 当希望移动某一个元素其它元素不受影响时使用相对定位, 相对定位可以实现元素的层叠
div1
div2
div3
绝对定位
- 格式: 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基线对齐(默认)
元素的显示层级
当两个元素非静态定位时可能存在层叠的问题 通过z-index样式控制显示层级, 值越大显示越靠前
综合布局练习（Demo）
学习记录，如有侵权请联系删除