一、本课目标
- 掌握绝对定位属性的使用及应用场景
二、绝对定位
absolute属性值
- 偏移设置：left、right、top、bottom
2.1父级没有定位
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#father{
border: 1px #666 solid;
padding: 0;
margin: 10px;
/*position: relative;*/
}
#first{
margin: 10px;;
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
#second{
margin: 10px;;
background-color: #003580;
border: 1px #0000A8 dashed;
position: absolute;
top: 0px;
right: 0px;
}
#third{
margin: 10px;;
background-color: #f3f3f3;
border: 1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
运行结果：
image.png
2.2父级有定位
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#father{
border: 1px #666 solid;
padding: 0;
margin: 10px;
position: relative;
}
#first{
margin: 10px;;
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
#second{
margin: 10px;;
background-color: #003580;
border: 1px #0000A8 dashed;
position: absolute;
top: 0px;
right: 0px;
}
#third{
margin: 10px;;
background-color: #f3f3f3;
border: 1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
运行结果：
image.png
结果对比分析：有了相对定位父级以后，第二个盒子就是依据它的父级来进行定位的；如果没有定位父级，会再往上面去找，一级一级去找，如果没有的话，那它就是针对浏览器窗口来进行定位。
2.3绝对定位特性
image.png
2.4绝对定位不设置偏移量
image.png
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#father{
border: 1px #666 solid;
padding: 0;
margin: 10px;
/*position: relative;*/
}
#first{
margin: 10px;;
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
#second{
margin: 10px;;
background-color: #003580;
border: 1px #0000A8 dashed;
position: absolute;
/*top: 0px;*/
/*right: 0px;*/
}
#third{
margin: 10px;;
background-color: #f3f3f3;
border: 1px #395E4F dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
运行结果：
image.png
