目录
一、概念
绝对定位会脱离文档流，相对于已经定位的上层元素（position）进行定位；若上层元素没有定位，则向更上层寻找已定位元素，直到根元素。
二、语法结构
<style>
选择器{/* absolute 绝对定位 */
position: absolute;}
</style>与相对定位一致，
- 水平位置：left定位元素和定位元素的左边距离，right定位元素和定位元素的右边距离
- 垂直位置：top定位元素和定位元素的上边距离，bottom定位元素和定位元素的下边距离
三、特点
①两个方向各选一个参数即可定位；
②定位的数值可以为负数；
③设置了绝对定位的盒子，都会有专属的浮层，有几个绝对定位的盒子，就有几个浮层。
四、绝对定位的使用
当我们为一个元素设置绝对定位时，这个元素就会脱离文档流。这意味着它不再占据文档流中的空间，其他元素会无视它的存在而进行布局。
想象一下，顾客们都在排队，每个顾客(元素)都占据了自己在队伍(文档流)中的一个位置。现在，假设队伍中有一位顾客(即“特别元素”)因为某种原因(即设置了绝对定位)，不再按照队伍的规则排队，而是走向某个特定位置（即浮层），脱离了原本的文档流队列,不再占用队伍中的空间，其他顾客(其他元素)看到这个变化后，会自然而然地填补“特别元素”原来所在的位置，这位“特别元素”的行为，就相当于它在文档流中设置了绝对定位，脱离了文档流。
原运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位代码前的代码</title>
<style>
div{
width: 100px;
height: 100px;
margin-bottom: 5px;
}
#div1{
background-color: red;
}
#div2{
background-color: green;
}
#div3{
background-color: blue;
}
</style>
</head>
<body>
<article>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</article>
</body>
</html>运行结果如下：
给盒子2使用绝对定位（position: absolute）的运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
div{
width: 100px;
height: 100px;
margin-bottom: 5px;
}
#div1{
background-color: red;
}
#div2{
background-color: green;
/* absolute 绝对定位 */
position: absolute;
left: 150px;
top: 50px;
}
#div3{
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</body>
</html>运行结果如下：
绿色盒子脱离原来的文档流，蓝色盒子则替补绿色盒子的位置。
其中绿色盒子2的移动位置是相对于页面而言的。
五、浮层效果
绝对定位常常被用来创建浮层效果。比如一个弹出的对话框、一个菜单或者一个提示框。这些浮层就像是排队中的那个人被放到了队伍的上方或者旁边，独立于队伍之外，却又能吸引人们的注意力。它们可以覆盖在其他元素之上，不受文档流中元素的影响，给用户提供特定的信息或交互功能。
原运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原运行代码</title>
<style>
#div1{
width: 50px;
height: 50px;
background-color: red;
}
#div2{
width: 100px;
height: 100px;
background-color: green;
}
#div3{
width: 100px;
height: 100px;
background-color: blue;
}
article{
width: 500px;
height: 500px;
background-color: gray;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<article>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</article>
</body>
</html>运行结果如下：
展示浮层效果运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原运行代码</title>
<style>
#div1{
width: 50px;
height: 50px;
background-color: red;
/* absolute 绝对定位 */
position: absolute;
left: 50px;
top: 50px;
}
#div2{
width: 100px;
height: 100px;
background-color: green;
}
#div3{
width: 100px;
height: 100px;
background-color: blue;
}
article{
width: 500px;
height: 500px;
background-color: gray;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<article>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</article>
</body>
</html>运行结果如下：
给红色盒子1添加绝对定位元素后则有了浮层，脱离文档流，有了浮动效果，绿色盒子2则占据红色盒子1原来的位置，其中红色盒子1的移动位置是相对于父容器article（即灰色盒子） 而言的。
六、总结
绝对定位的盒子从标准流中脱离，对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后，生成一个块级框，与原来它在正常流中生成的框无关。
绝对定位在 CSS 布局中有着重要的作用。它可以让我们灵活地控制元素的位置，实现各种独特的布局和交互效果。
七、练习
可以利用 绝对定位 和 相对定位 的特性，制作下面的图案
运行代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子定位</title>
<style>
article{
width: 500px;
height: 500px;
background-color: gray;
position: relative;
left: 100px;
top: 100px;
}
#div1{
width: 50px;
height: 50px;
background-color: white;
position: absolute;
left: 100px;
top: 100px;
}
#div2{
width: 50px;
height: 50px;
background-color: white;
position: absolute;
left: 350px;
top: 100px;
}
#div3{
width: 50px;
height: 50px;
background-color: red;
position: relative;
left: 225px;
top: 200px;
}
#div4{
width: 25px;
height: 25px;
background-color: green;
position: relative;
left: 12.5px;
top: 12.5px;
}
#div5{
width: 200px;
height: 50px;
background-color: white;
text-align: center;
position: absolute;
left: 150px;
top: 300px;
}
</style>
</head>
<body>
<article>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
<div id="div4"></div>
</div>
<div id="div5">绝对定位练习</div>
</article>
</body>
</html>其中鼻子（红绿盒子）利用绝对定位的浮层效果，使绿色盒子位于红色盒子上方。为了更方便的使绿色盒子位于红色盒子的中间，我们可以在红色盒子（#div3） 内再加一个绿色盒子（#div4），使其称为绿色的父容器。
标签：定位,盒子,color,100px,新纪元,height,文档,background From： https://blog.csdn.net/2401_84309743/article/details/142990526