CSS —— 定位
目录
4. 脱标的盒子不会触发外边距塌陷(浮动元素、绝对定位、固定定位)
一、定位的概述
1. 定位组成:
1.1 定位:将盒子定在某一个位置,按照定位的方式移动盒子;
1.2 组成:定位 = 定位模式 + 边偏移;
1.3 定位模式:指定一个元素在文档中的定位方式;
1.4 边偏移:决定该元素的最终位置;
2. 定位模式和边偏移
2.1 定位模式:通过 position 属性进行设置;
2.2 边偏移:
二、几种定位
1. 相对定位
1.1 相对定位:(relative)是元素相对于原来的位置进行位置移动;
1.2 语法格式:
选择器 { position : relative; }
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: cadetblue;
}
div {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: cadetblue;
left: 300px;
}
1.3 特点:
① 移动位置的时候参照点是自己原来的位置;
② 不脱标,继续保留原来的位置;
.one {
width: 200px;
height: 200px;
background-color: cadetblue;
}
.two {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: cadetblue;
}
.two {
width: 200px;
height: 200px;
background-color: pink;
}
2. 绝对定位
2.1 绝对定位:(absolute)移动位置时参照点为父级及其以上元素;
2.2 语法格式:
选择器 { position : absolute; }
.one {
width: 300px;
height: 300px;
background-color: cadetblue;
}
.two {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
width: 300px;
height: 300px;
background-color: cadetblue;
}
.two {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
1.3 特点:
① 没有父级元素及其以上元素或祖先元素没有定位,则以浏览器为参照点;
② 以最近一级有定位的祖先元素为参照点移动位置;
③ 脱标,不再占有原先的位置;
.one {
width: 300px;
height: 300px;
background-color: cadetblue;
}
.two {
width: 200px;
height: 200px;
background-color: pink;
}
.three {
width: 100px;
height: 100px;
background-color: skyblue;
}
.one {
position: relative;
top: 0px;
width: 300px;
height: 300px;
background-color: cadetblue;
}
.two {
width: 200px;
height: 200px;
background-color: pink;
}
.three {
position: absolute;
bottom: 50px;
left: 200px;
width: 100px;
height: 100px;
background-color: skyblue;
}
3. 固定定位
3.1 固定定位:(fixed)将元素固定于浏览器可视区的位置;
3.2 语法格式:
选择器 { position : fixed; }
3.3 特点:
① 以浏览器的可视窗口作为参照点移动元素;
(跟父元素无关且不随滚动条滚动)
② 脱标,不占有以前的位置;
3.4 固定定位小技巧:
4. 粘性定位
4.1 粘性定位:(sticky)可认为为相对定位与固定定位的混合;
4.2 语法格式:
选择器 { position : sticky; top : 10px; }
4.3 特点:
① 以浏览器的可视窗口为参照点;
② 不脱标,占有原来的位置;
③ 必须添加top、botton、right、left其中一个才有效;
5. 定位叠放次序
5.1 z-index:控制盒子的前后次序;
5.2 语法格式:
选择器 { z-index : 1; }
5.3 特点:
三、有关知识点
1. 子绝父相
子级是绝对定位,父级则用相对定位
2. 绝对定位盒子居中
3. 定位特殊性
4. 脱标的盒子不会触发外边距塌陷(浮动元素、绝对定位、固定定位)
5. 绝对定位、固定定位会完全压住盒子
#END(部分截图源于b站pink老师)