web前端day03

元素的定位方式

• 五种定位方式:

• 静态定位: 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基线对齐(默认)

元素的显示层级

当两个元素非静态定位时可能存在层叠的问题 通过z-index样式控制显示层级, 值越大显示越靠前