## 定位流

## 定位流

# 相对定位

# 绝对定位

# 子绝父相

# 固定定位

# z-index属性

定位的元素会盖住没有定位的元素

1.定位流分类

1.1 相对定位

1.2绝对定位

1.3固定定位

1.4静态定位

2.什么是相对定位?

相对定位就是相对于自己以前在标准流汇总的位置来移动

-格式

position : relative;

top: ;

right: ;

bottom: ;

left: ;

3.相对定位注意点

3.1 相对定位是不脱离标准流的,会继续在标准流中占用一份空间

3.2 在相对定位中同一个方向上的定位属性只能使用一个

3.3 相对定位是不脱离标准流的,所以在相对定位中是区分块级元素/行内元素/行内块级元素的

3.4 相对定位是不脱离标准流的,并且相对定位的元素会占用标准流中的位置,所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局

4.相对定位应用场景

4.1 用于对元素进行微调

4.2 配合后面学习的绝对定位来使用

1.什么是绝对定位?

绝对定位就是相对于body来定位

position: absolute;

2.绝对定位注意点

2.1 绝对定位的元素是脱离标准流的

2.2 绝对定位的元素是不区分块级元素/行内元素/行内块级元素的

3.规律

3.1 默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body作为参考点

3.2 如果一个绝对定位的元素有祖先元素,并且祖先元素中有一个是定位流中的元素,那么这个这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

3.3 如果一个绝对定位的元素有祖先元素,并且祖先元素中有多个是定位流中的元素,那么这个绝对定位的元素会以它最近的那个定位流的祖先元素为参考点

注意点

1.如果一个绝对定位的元素是以body作为参考点,那么其实是以网页首屏作为参考点,而不是以整个网页的宽高作为参考点,且不会随着滚动条滚动而滚动

2.一个绝对定位的元素会忽略祖先元素的padding

# 子绝父相

相对定位弊端:

相对定位不会脱离标准流,会继续在标准流中占用一份空间,所以不利于布局

绝对定位弊端:

默认情况下绝对定位的元素会以body作为参考点,所以会随着浏览器的宽高的变化而变化

子绝父相

子元素用绝对定位

父元素用相对定位

1.如何让绝对定位的元素水平居中

只需要设置绝对定位元素的left: 50%;

再设置margin-left: -宽度的一半;

1.什么是固定定位

固定定位会脱离标准流,固定定位和前面学习的背景关联方式很像,背景关联方式可以让某个图片不随着滚动条的滚动而滚动,而固定定位可以让某个盒子不随着滚动条的滚动而滚动

position: fixed;

注意点:

1.固定定位的元素是脱离标准流的,不会占用标准流中的空间

2.固定定位和绝对定位一样,不区分块级元素/行内元素/行内块级元素

1.什么是z-index属性?

默认情况下所有元素都有一个默认的z-index属性,取值是0,z-index属性的作用就是专门用于控制定位流元素的覆盖关系

1.默认情况下,定位流的元素会盖住标准流的元素

2.默认情况下定位流的元素后面编写的会盖住前面编写的

3.如果定位流的元素设置了z-index,那么谁的z-index属性比较大,谁就是显示在上面

注意点:

1.从父现象

1.1 如果两个元素的父元素都没有设置z-index属性,那么谁的z-index属性比较大谁就显示在上面

1.2 如果两个圆的父元素设置了z-index属性,那么子元素的z-index属性就会失效,也就是说谁的父元素的z-index属性比较大谁就显示在上面

z-index应用场景:

控制界面上的定位元素的覆盖关系,例如网页中后面的定位元素不能覆盖前面的导航条通栏

绝对定位中如何使元素在网页中居中?

left: 50%;

margin-left: 子元素宽度的一半px;