一、定位
定位是一种更加高级的布局手段。通过定位可以将一个元素摆放到页面的任意位置。使用 position 属性设置定位。
posotion 属性的可选值：
- static：默认值，元素是静止的没有开启定位
- relative：开启元素的相对定位
- absolute：开启元素的绝对定位
- fixed：开启元素的固定定位
- sticky：开启元素的粘滞定位
二、相对定位
当元素的 position 属性设置为 relative 时，则开启了元素的相对定位。元素开启相对定位以后，如果不设置偏移量，元素不会发生任何变化。当元素开启定位以后，可以通过偏移量设置元素的位置。相对定位是元素参照于元素在文档流中的位置进行定位的。相对定位会提升元素的层级。相对元素不会是元素脱离文档流。相对元素不会改变元素的性质，块元素还是块元素，行内元素还是行内元素；
偏移量：
- top：定位元素和定位位置上边的距离；
- bottom：定位元素和定位位置下边的距离；
- left：定位元素和定位位置左侧的距离；
- right：定位元素和定位位置右侧的距离；
<!DOCTYPE html>
<html>
<head>
<title>相对定位</title>
<meta charset="utf-8">
<style>
div{
font-size: 50px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 100px;
top: -100px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
定位元素垂直方向的位置由 top 和 bottom 两个属性来控制，通常情况下，我们只会使用其中一个属性。top 值越大，定位元素越向下移动，bottom 值越大，定位元素越上移动；
定位元素水平方向的位置由 left 和 right 两个属性来控制，通常情况下，我们只会使用其中一个属性。left 值越大，元素越靠右，right 值越大，元素越靠右；
三、绝对定位
当元素的 position 属性值设置为 absolute 时，开启元素的绝对定位。开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化。开启绝对定位后，元素会从文档流中脱离。绝对定位会改变元素的性质。绝对定位会使元素提升一个层级。绝对定位元素是相对于其包含块进行定位的。
正常情况下，包含块就是离当前最近的祖先块元素。开启绝对定位情况下，包含块就是离它最近的开启了定位的祖先元素；如果所有的祖先元素都没有开启定位，则根元素就是它的包含块。
偏移量：
- top：定位元素和定位位置上边的距离；
- bottom：定位元素和定位位置下边的距离；
- left：定位元素和定位位置左侧的距离；
- right：定位元素和定位位置右侧的距离；
<!DOCTYPE html>
<html>
<head>
<title>绝对定位</title>
<meta charset="utf-8">
<style>
div{
font-size: 50px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 400px;
height: 400px;
background-color: orange;
position: relative;
}
.box3{
width: 300px;
height: 300px;
background-color: yellow;
position: relative;
}
.box4{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">
2
<div class="box3">
4
<div class="box4">5</div>
</div>
</div>
</body>
</html>
四、固定定位
将元素的 position 属性设置为 fixed 则开启了元素的固定定位。固定定位也是一种绝对定位。固定定位的大部分特点都和绝对定位一样。唯一不同的是固定定位永远参照于浏览器的视口进行定位。固定定位的元素不会随网页的滚动条滚动。
<!DOCTYPE html>
<html>
<head>
<title>固定定位</title>
<meta charset="utf-8">
<style>
body{
font-size: 50px;
height: 3000px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 400px;
height: 400px;
background-color: orange;
position: relative;
}
.box3{
width: 300px;
height: 300px;
background-color: yellow;
position: relative;
}
.box4{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">
2
<div class="box3">
4
<div class="box4">5</div>
</div>
</div>
</body>
</html>
五、粘滞定位
当元素的 position 属性设置为 sticky 时，则开启了元素的粘滞定位。粘滞定位和相对定位的特点基本一致，但是粘滞定位可以在元素到达某个位置时将其固定。
<!DOCTYPE html>
<html>
<head>
<title>粘滞定位</title>
<meta charset="utf-8">
<style>
body{
font-size: 50px;
height: 3000px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 300px auto;
position: sticky;
top: 100px;
}
</style>
</head>
<body>
<div class="box1">1</div>
</body>
</html>
六、绝对定位元素的位置
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<meta charset="utf-8">
<style>
.box1{
width: 500px;
height: 500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
/*
水平布局：
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
- 当我们开启绝对定位以后：
- 水平方向的布局等式就需要添加left和right两个值
- 此时规则和之前一样只是多添加了两个值
- 当发生过度约束：
- 如果9个值中没有auto，则自动调整right值以使等式满足
- 如果有auto，则自动调整auto的值以使等式满足
- 可以设置auto的值：margin、width、left、right
- left和right的值默认是auto，
- 如果不知道left和right，则等式不满足时，自动调整这两个值
*/
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
/*
垂直布局：
top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的高度
*/
margin-top: auto;
margin-bottom: auto;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
七、元素的层级
<!DOCTYPE html>
<html>
<head>
<title>元素的层级</title>
<meta charset="utf-8">
<style>
div{
font-size: 50px;
}
.box1{
width: 200px;
height: 200px;
background-color: rgba(0, 255, 255, .5);
position: absolute;
/*
对于开启定位的元素，可以通过z-index属性来指定属性的层级
z-index需要一个整数作为参数，值越大，元素的层级越高
元素的层级越高，越优先实现
如果元素的层级一样，优先显示靠下的元素
祖先元素的层级再高也不会盖住后代元素
*/
z-index: 3;
}
.box2{
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, .5);
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.box3{
width: 200px;
height: 200px;
background-color: rgba(0, 0, 255, .5);
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>