position属性
定位有四种!定位有四种!定位有四种!重要的事情说三遍!
写得较繁琐,不过一步步看下去绝对能懂
- static 没有定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
static(默认值):没有定位
因为这是position属性默认的值,所以大家经常会忘记这个值
演示:
不设置定位,最初的HTML代码与对应的CSS代码以及最初的运行图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/position.css">
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.div1 {
height: 50px;
background-color: red;
}
.div2 {
height: 50px;
background-color: aqua;
}
.div3 {
height: 50px;
background-color: blueviolet;
}
relative:相对定位
没有脱离文档流,相对于没有定位前的位置,进行偏移
演示:
对div2设置相对定位,并展示设置后的运行图
.div2 {
position: relative; /*相对定位*/
top: 20px; /*距离顶部20px*/
height: 50px;
background-color: aqua;
}
运行后的效果为div2相对于没有定位前的位置,向下移动20px并遮挡住了div3的部分区域,说明了相对定位没有脱离标准文档流,div2原来所占据的位置依旧存在。
absolute:绝对定位
- 脱离文档流,后面的元素会向上补齐,覆盖块级元素(或行内元素)
- 本质:元素会隐性变成inline-block(行内块级元素)
- 原理:相对于离它最近的已定位的“祖先”元素。如没有定位的“祖先”元素,就以初始可视窗口为准,进行设置
演示1:
对div2设置绝对定位,并展示设置后的运行图
.div2 {
position: absolute; /*绝对定位*/
top: 20px;
height: 50px;
background-color: aqua;
}
运行后的效果为,div2脱离了标准文档流,原来占据的位置消失,元素变为inline-block(行内块级元素),因为这里相对于div2来说,没有找到它的”祖先元素“设置过定位,所以它设置绝对定位后的位置是相对于可视窗口的顶部,向下移动了20px。
演示2:
对div2设置绝对定位,并对其父元素div4设置相对定位
<body>
<div class="div1">div1</div>
<div class="div4">
<div class="div2">div2</div>
</div>
<div class="div3">div3</div>
</body>
.div2 {
position: absolute; /*绝对定位*/
top: 20px;
height: 50px;
background-color: aqua;
}
.div4 {
position: relative;
height: 90px;
background-color: chocolate;
}
运行后的效果为,div2脱离了标准文档流,原来占据的位置消失,元素变为inline-block(行内块级元素),因为这里相对于div2来说,能够找到它的”祖先元素“设置过定位,如上面代码块所示,对其父元素div4设置了相对定位(当然并不是只能对它的父元素进行定位设置,如果你对其父元素不进行定位设置,而是对其”祖先“元素进行定位,那么div2会找离它最近的已定位的“祖先”元素,最后就会有不同的效果),所以这里它设置绝对定位后的位置是相对于div4的顶部,向下移动了20px。
fixed:固定定位
- 脱离文档流
- 原理:相对于浏览器的边框,进行定位
演示:
单独对div2设置固定定位
.div2 {
position: fixed; /*固定定位*/
right: 20px;
height: 50px;
background-color: aqua;
}
运行后的效果为,div2脱离了标准文档流,原来占据的位置消失,元素变为inline-block(行内块级元素),并与窗口右边距离为20px。
(设置了固定定位后,相对于浏览器的边框,进行定位)