目录
1.绝对定位概念（absolute）
- 当元素的position属性值设置为absolute时，就开启了元素的绝对定位
- 元素在移动位置的时候，是相对于它上一级元素来说的
2、绝对定位语法
2.1 代码添加 position: absolute;
| 作用 | 属性名 |
| 水平方向 | left、right |
| 垂直方向 | top、bottom |
2.2 创建一个HTNL结构
<body>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</body>2.3 添加CSS属性
<style>
div{
width: 100px;
height: 100px;
margin: 3px;}
#div1{
background-color: red;
#div2{
background-color: green;
#div3{
background-color: blue;
</style>运行效果：
2.3 给div1加入绝对定位
<style>
#div1{
width: 50px;
height: 50px;
background-color: rgb(255, 0, 0);
position: absolute;
left: 50px;
top: 50px;}
#div2{
width: 100px;
height: 100px;
background-color: rgb(0, 255, 4);}
#div3{
width: 100px;
height: 100px;
background-color: rgb(43, 0, 255);}
article{
width: 600px;
height: 600px;
background-color: black;
position: absolute;
left: 100px;
top: 100px;}
</style>
</head>
<body>
<article>
<div id="div1">红</div>
<div id="div2">绿</div>
<div id="div3">蓝</div>
</article>运行效果：
4.绝对定位练习
4.1 做出以下效果图
参考代码：
<style>
#div1{
width: 50px;
height: 50px;
background-color: rgb(255, 0, 0);
position: absolute;
left: 300px;
top: 250px;}
#div5{
width: 25px;
height: 25px;
background-color: rgb(0, 255, 8);
position: absolute;
left: 312px;
top: 262px;}
#div2{
width: 40px;
height: 40px;
background-color: rgb(255, 255, 255);
position: absolute;
left: 500px;
top: 150px;}
#div3{
width: 40px;
height: 40px;
background-color: rgb(255, 255, 255);
position: absolute;
left: 100px;
top: 150px;}
#div4{
width: 400px;
height: 40px;
background-color: rgb(255, 255, 255);
position: absolute;
left: 100px;
top: 400px;}
article{
width: 600px;
height: 600px;
background-color: rgb(117, 117, 117);
position: absolute;
left: 100px;
top: 100px;}
</style>
</head>
<body>
<article>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4">绝对练习</div>
<div id="div5"></div>
</article>