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