定位层级-第十六天
定位层级
| 定位方式 | 属性值 | 相对谁移动 | 是否占位置 |
|---|---|---|---|
| 静态定位 | static | 不能通过方位属性移动 | 占位置 |
| 相对定位 | relative | 相对于自己原来的位置 | 占位置 |
| 绝对定位 | absolute | 相对于最近的且有定位的祖先元素移动 | 不占位置(脱标) |
| 固定定位 | fixed | 相对浏览器可视区域 | 不占位置(脱标) |
不同布局方式元素的层级关系:
- 标准流＜浮动＜定位
不同定位之间的层级关系:
- 相对,绝对,固定默认层级相同
- 此时HTML中写在下面的元素层级更高,会覆盖上面的元素
更改定位元素的层级
场景:改变定位元素的层级
属性名:z-index
属性值:数字
- 数字越大,层级越高
装饰
基线:浏览器文字类型元素排版中存在用于对齐的基线baseline
场景:解决行内/行内块元素垂直对齐问题
对齐问题
- 当图片和文字在一行显示时,其实底部是不对齐的
设置vertical-align:middle; 中线对齐解决
-
行内块元素与行内块元素之间,顶部无法对齐问题
只要不设置vertical-align:baseline;默认基线对齐就能解决
-
图片和其他的行内元素或者行内块元素要解决垂直对齐问题,首先va要有限给img设置
-
表单元素无法贴顶对齐
只要不设置vertical-align:baseline;默认基线对齐就能解决
-
图片底部有空白空隙
改变img标签的垂直对齐方式补位baseline即可
或者设置img转换为块级元素
-
图片设置垂直居中
先设置行高等于高度,再给图片设置vam垂直居中即可
vertical-align属性的值
- vertical-align:baseline;默认基线对齐
- vertical-align:middle; 中线对齐
- vertical-align:top;对线对齐
- vertical-align:bottom; 底线对齐
- vertical-align:top;顶线对齐
注意:
-
块级元素无法设置该属性
-
行内块元素与行内元素之间的垂直对齐方式