一、本课目标
- 了解定位属性在网页中的使用
- 掌握相对定位属性的使用及应用场景
二、定位
image.png
后三个非常重要，在网页中使用的非常多。
2.1static属性值
没有定位，以标准流的方式显示
示例代码：（给第一个盒子加上static）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#father{
border: 1px #666 solid;
padding: 0;
}
#first{
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
position: static;
}
#second{
background-color: #003580;
border: 1px #0000A8 dashed;
}
#third{
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.2relative属性值
相对自身原来位置进行偏移，偏移设置：top、left、right、bottom
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#father{
border: 1px #666 solid;
padding: 0;
margin: 10px;
}
#first{
margin: 10px;;
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
position: relative;
top: -20px;
left: 20px;
}
#second{
margin: 10px;;
background-color: #003580;
border: 1px #0000A8 dashed;
}
#third{
margin: 10px;;
background-color: #f3f3f3;
border: 1px #395E4F dashed;
/*position:relative;*/
right: 20px;
bottom: 30px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
运行结果：
image.png
分析：观察第一个盒子，设置了相对偏移，位置也发生了改变；观察第三个元素，没有设置position的属性值，只有right和bottom，并没有发生任何偏移。
规律如下：
- 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。
- 设置相对定位的盒子的位置仍保留在标准文档流中
- 设置相对定位的盒子原来的位置会被保留下来
- 它的层级提高了，偏移的元素会盖在原来的元素上面
偏移量的正负如下：
image.png
注：这个坐标轴的上下左右全TM是反的。
因为偏移会是偏移元素的层级提高，而浮动也会使元素层级提高，当两者都发生在一个元素上的时候，会发生怎么样的火花？
设置第二个盒子右浮动，再设置第一、第二盒子相对定位。
示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#father{
border: 1px #666 solid;
padding: 0;
margin: 10px;
}
#first{
margin: 10px;;
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
position: relative;
right: 20px;
bottom: 20px;
}
#second{
margin: 10px;;
background-color: #003580;
border: 1px #0000A8 dashed;
float: right;
position: relative;
left: 20px;
top: -20px;
}
#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
结果分析：先设置第二个盒子浮动之后，再在其上加上定位，第二个盒子会以浮动后的位置作为基准进行便宜。
