一、CSS 定位概述
定位概念
- 普通流定位
- 页面中的块级元素框从上到下一个接一个地排列
- 每一个块级元素都会出现在一个新行中
- 内联元素将在一行中从左到右排列水平布置
- 浮动
- 相对定位
- 绝对定位
- 固定定位
定位属性
- position属性:
- position: static/relative/absolute/fixed;
- 偏移属性:实现元素框位置的偏移
- top/bottom/right/left: value;
- 堆叠顺序
- z-index: value;
一、CSS 定位方式
相对定位
- 元素扔保持其微定位前的形状
- 元素原本所占的空间扔保留
- 元素框会相对它原来的位置偏移某个距离
- 设置垂直或水平位置，让元素相对于它的起点进行移动
- 设置元素为相对定位
- 首先需要设置position 属性的值为 relative
- 然后使用left 属性或者 right属性设置水平方向的偏移量
- 也可以使用 top 属性或者 bottom 属性设置垂直方向的偏移量
绝对定位
- 将元素的内容从普通流中完全移除，不占据空间
- 并使用偏移属性来固定该元素的位置
- 相对于最近的已定位祖先元素
- 如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如body元素
- 设置元素为绝对定位
- 首先需要设置position 属性的值为 absolute
- 然后使用left 属性或者right 属性设置元素的水平位置
- 也可以使用top 属性或者bottom 属性设置元素的垂直位置
堆叠顺序
- 一旦修改了元素的定位方式，则元素可能会发生堆叠
- 可以使用z-index属性来控制元素框出现的重叠顺序
- z-index 属性
- 值为数值: 数值越大表示堆叠顺序更高，即离用户更近
- 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即元素的显示会接近页面表面
- 可以设置为负值: 表示离用户更远
固定定位
- 将元素的内容固定在页面的某个位置
- 元素从普通流中完全移除，不占用页面空间
- 当用户向下滚动页面时元素框并不随着移动
- 设置固定定位
- 首先需要设置position 属性的值为fixed
- 通过 left 、top、right以及bottom这些偏移属性来定义元素的位置
总结：本章内容主要介绍了 Css定位（定位概念 、定位方式）。