#在CSS中当一个元素被设置为绝对定位时，它会脱离正常的文档流，不再占据原本在页面布局中的空间。这意味着其他元素会忽略它的存在，就好像它不存在一样，如设计页面中的覆盖层、弹出框等时非常有用处。#
一、 绝对定位的定义
1、前言
绝对定位可以用于脱离文档流，盒子从标准流中脱离，与相对定位不同，绝对定位对其后的兄弟盒子定位没有影响，原先在正常文档流中所占的空间会关闭，如同原来就不存在过一样。
元素通过定位后，会生成一个新的块级框。
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>Document</title>
<style>
/* 父容器 */
article{
width: 250px;
height: 350px;
background-color: gray;
position: relative;
}
/* 盒子 */
div{
width: 220PX;
height: 100px;
background-color: antiquewhite;
border: black 2px solid;
/* 外边距 */
margin: 2PX;
top: 5%;
left: 5%;
}
#div1{
background-color: red;
position: relative;
}
#div2{
background-color: rgb(59, 223, 100);
position: relative;
}
#div3{
background-color: blue;
position: relative;
}
</style>
</head>
<body>
<article >
<div id="div1">盒子一</div>
<div id="div2">盒子二</div>
<div id="div3">盒子三</div>
</article>
</html>代码运行后如下：
二、 绝对定位的使用
1、前言
- 在盒子定位中通过给元素设置 position:absolute即可实现绝对定位
- 精确控制位置：使用 left、right、top、bottom 四个属性调整位置。
- 层叠顺序：绝对定位的元素会根据其设置的 z-index 值来确定层叠顺序。
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>Document</title>
<style>
div{
width: 100PX;
height: 100px;
/* background-color: antiquewhite; */
border: 2PX black solid;
/* 外边距 */
margin: 3PX;
}
#div1{
background-color: red;
position: relative;
}
#div2{
background-color: rgb(59, 223, 100);
position: absolute;
left: 50px;
top: 50px;
}
#div3{
background-color: rgb(116, 63, 122);
}
article{
width: 300px;
height: 300px;
background-color: gray;
position: relative;
}
</style>
</head>
<body>
<article>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</article>
</html>代码运行后如下：
3、绝对定位的特点
- 在盒子定位中，使用绝对定位，会脱离文档流，对父元素、兄弟元素造成影响。
- 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
- 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>Document</title>
</head>
<body>
<style>
#div1{
width: 30px;
height: 30px;
position: absolute;
background-color: aliceblue;
left: 100PX;
top: 100PX;
}
#div2{
width: 30px;
height: 30px;
position: absolute;
background-color: aliceblue;
left: 250px;
top: 100PX;
}
#div3{
width: 30px;
height: 30px;
position: absolute;
background-color: red;
left: 180px;
top: 200PX;
}
#div4{
width: 20px;
height: 20px;
position: absolute;
background-color: green;
left: 185px;
top: 205PX;
}
#div5{
width: 150px;
height: 25px;
position: absolute;
background-color: aliceblue;
left: 123px;
top: 290PX;
}
article{
width: 400px;
height: 400px;
background-color: gray;
position: absolute;
left: 550px;
top: 50px;
}
</style>
</body>
<article>
<div id="div1"></div>
<div id="div2"></div><br>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</article>
</html>代码运行后如下：
