(8)前端-初识HTML与CSS-定位布局
定位流分类
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 粘滞定位
- z-index
1、静态定位
postion:static;
默认定位方式,将元素定位在默认文档流中。
2、相对定位
postion:relative;
相对于自己以前在默认文档流的位置移动,使用top,right,bottom,left来控制。
注意点
- 相对定位不脱离默认文档流,占据原来空间
- 由于不脱离默认文档流,因而区分块级元素/行内元素/行内块级元素
- 同一个方向上的定位属性只能使用一个
- 给相对定位的元素设置margin/padding等属性的时会影响到默认文档流的布局
应用场景
- 用于元素位置的微调
- 配合绝对定位来使用
3、绝对定位
position: absolute;
相对于body来定位
确定绝对定位的参考点
- 默认情况下,所有绝对定位的元素, 无论有没有祖先元素, 以body作为参考点。
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流(除了静态定位)的那个祖先元素作为参考点。
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。
注意点
- 绝对定位脱离标准流,因而不占据原有空间
- 也不区分块级元素/行内元素/行内块级元素
- 如果一个绝对定位的元素是以body作为参考点, 是以网页首屏的宽度和高度作为参考点, 而非以整个网页的宽度和高度作为参考点
- 一个绝对定位的元素会忽略祖先元素的padding
应用场景
子绝父相
相对定位元素弊端:会占据原有空间,不利于布局
绝对定位元素弊端:会以body作为参考点,会随着浏览器的宽高的变化而变化
而当子元素用绝对定位, 父元素用相对定位时,可以很好的布局
绝对定位元素的水平居中
left:50%;
margin-left: 元素宽度的一半px;
4、固定定位
position: fixed;
让某元素不随着滚动条的滚动而滚动
注意点
- 脱离标准流的, 不会占用标准流中的空间
- 也不区分行内/块级/行内块级
5、粘滞定位
position: sticky;
结合了相对定位和固定定位两种定位功能于一体的特殊定位,当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
div:nth-child(3) {
width: 200px;
background-color: aqua;
position: sticky;
/*向下滑动滚动条,当sticky元素到达距离相对定位的元素顶部60px的位置时固定,不再向上*/
top: 60px;
/*` top,bottom,right,left 之一即可 */
}
</style>
<body>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>
滑动前
![image-20210914170822350](https://i-blog.csdnimg.cn/blog_migrate/752a9a6819b1e3106033a2d0963a0126.png)
向下滑动一定距离后
注意点
不脱离文档流,占据原来的空间
使用条件
- 父元素不能overflow:hidden或者overflow:auto属性。
- 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效
6、z-index
- 默认情况下所有的元素都有一个默认的z-index属性, 取值是0,其作用是专门用于控制定位流元素的覆盖关系
- 默认情况下定位流的元素会盖住标准流的元素
- 默认情况下定位流的元素后面编写的会盖住前面编写的
- 如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面
注意点—从父现象
如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上
如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。
谁就会显示在上面