定位的概念、用法、特性

定位

1：标准流

• 块级元素独占一行------垂直布局

• 行内元素/行内块元素一行显示多个-----水平布局

2：浮动

让原本垂直布局的块元素变成水平布局

3：定位

• 可以让元素自由的摆放在网页的任意位置

• 用于盒子之间的层叠情况

4：使用场景

• 定位之后元素层级越高，可以层叠在其他盒子上

• 可以让盒子固定在屏幕中的某个位置

5：使用定位步骤

• 设置定位属性 psition

  absolute   绝对定位

• 设置偏移值

  偏移值分为两个方向，水平和垂直方向各选一个

  水平  left距离左边的距离      
        right距离右边的距离
  垂直   
     top距离上边的距离   
     bottom距离下边的距离

   

6:绝对定位

position:absolute

特点：

• 页面中不占位置，脱离了标准流

• 配合方位属性实现移动

• 祖先元素中没有定位， 默认相对于浏览器可视区域进行移动

  祖先元素中有定位， 相对于最近的 有定位的祖先元素进行移动

7：相对定位

position: relative;

特点：

• 配合方位属性实现移动

• 相对于自己原来位置进行移动

• 在页面中占位置--没有脱标

应用场景：

• 子绝父相

• 用于小范围的移动

8：子绝父相

让子元素相对于父元素进行自由移动

含义：

• 子元素：绝对定位

• 父元素 相对定位

好处：

父元素相对定位，对页面布局影响最小

9：静态定位

静态定位是默认值，就是之前认识的标准流

position:static

• 静态定位是之前的标准流，不能通过方位属性进行移动

10:固定定位

相对于浏览器进行定位移动

position:fixed

特点:

• 配合方位属性实现移动

• 相对于浏览器进行移动

• 在页面中不占位置--脱离标准流

场景：

让盒子固定在屏幕中的某个位置

11：元素的层级关系

不同布局方式元素的层级关系

定位>浮动>标准流

不同定位之间的层级关系

• 相对，绝对，固定默认层级相同

• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

更改定位元素的层级

z-index:数字; 数字越大，层级越高