定位，子绝父相

定位

css的定位可以把元素放在页面的任何一个位置。

css设置定位： 模式+ 位置

1：标准流

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

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

2：浮动

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

3：定位

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

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

4：使用场景

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

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

5：使用定位步骤

• 设置定位属性 position

  absolute绝对定位  relative相对定位  fixed固定定位  static静态定位  sticky粘性定位

• 设置偏移值

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

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

   

6:绝对定位

position: absolute

特点：

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

• 配合方位属性实现移动

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

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

7：相对定位

position: relative;

特点：

• 配合方位属性实现移动

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

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

应用场景：

• 子绝父相

• 用于小范围的移动

8：子绝父相

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

含义：

• 子元素：绝对定位

• 父元素 相对定位

好处：

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

9：静态定位

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

position: static

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

10:固定定位

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

position: fixed

特点:

• 配合方位属性实现移动

• 相对于浏览器进行移动

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

场景：

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

11:粘性定位

粘性定位就是当页面滚动到某个元素设置的条件时，该元素就会固定在某个位置不在随页面继续滚动，一直到条 件不满足时再继续跟随页面滚动。

会产生动态效果，很像relative和fixed的结合

特点:

• 配合方位属性实现移动

• 相对于浏览器进行移动

• 占有原先的位置

   

1、父元素不能overflow: hidden或者overflow: auto属性。 2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 3、父元素的高度不能低于sticky元素的高度 4、sticky元素仅在其父元素内生效

12：元素的层级关系

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

定位>浮动>标准流

不同定位之间的层级关系

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

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

更改定位元素的层级

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

13:利用定位让元素居中

• 1. top,left设置成50% 2.margin-left,top 设置成负的自身宽度的一半

• 1. top,bottom,left,right 都设置为 0 2.设置 margin: auto