前端（七）定位流
定位流
文章目录
- 定位流
- 一、相对定位
- 二、绝对定位
- 三、固定定位
- 四、z-index
一、相对定位
所谓相对定位就是相对于自己在文档流中的位置来移到，这是一种不脱离文档流的布局方式。
相对定位需要设置position:relative，并配合top、left、right、bottom一起使用，并且top和bottom、right和left只能同时设置一个。在相对定位中设置的margin是按照原始的位置进行移动的，也可以理解为标签会先完成margin操作，再进行相对定位操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:0;
padding:0;
}
div {
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
position: relative;
top: 20px;
left: 20px;
}
.box2 {
background-color: green;
position: relative;
top: 40px;
left: 40px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
在相对定位中，由于其不脱离文档流，因此元素依然会占用文档流中的位置，并且依然区分块级元素、行内元素、行内块级元素。相对定位一般用于对元素位置的微调，例如将图片验证码移到到验证码输入框的左侧。
二、绝对定位
绝对定位就是寻找父级标签中设置为定位流的标签(相对定位、绝对定位、固定定位)，自身相对于这个标签进行移动，如果父级标签不存在定位流的标签则会找body作为参考标签，如果父级标签存在多个定位流标签，则会选择离自身近的标签作为参考标签。
绝对定位使用position:absolute，同样需要设置top、bottom、left、right，并且top和bottom、right和left只能同时设置一个。
另外绝对定位是完全脱离文档流的，这就意味着绝对定位不区分块级、行内、行内块级元素，可以给这些元素设置宽高，同时绝对定位在文档流中不占用位置，下方元素会顶上设置绝对定位的元素位置。
此外绝对定位还有几个注意点：
- 绝对定位把body作为参考标签时实际参考的是首屏(当前屏幕)的宽高，因此设置 bottom: 0;right: 0;会将标签设置在首屏的最下侧，该标签不会随滚动条的移动而移动。
- 绝对定位会忽视父级标签的padding。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box1 {
background-color: red;
position:absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
}
.box2 {
background-color: green;
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
另外在绝对定位中不能使用margin:0 auto;进行盒子居中了，如果想让盒子居中可以设置left: 50%; top:50%;margin-left:-元素宽度一半px; margin-top:-元素高度度一半px;
如果设置绝对定位的盒子是参考body标签，则可以设置
{background-color:red;position:absolute;top:0;bottom:0;left:0;right:0}实现填满整个网页的效果。
另外在实际应用中还有一个小技巧，可以将父标签设置为相对定位但是不移到位置，以此来实现子标签绝对定位自由移动位置的效果，称之为子绝父相。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.box2 {
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
left: 100px;
top:100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
三、固定定位
固定定位是相对于浏览器窗口的定位方式(与首屏不同)，它固定的标签会随着滚动条的移动而移动，它也是完全脱离文档流的排版方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box1 {
background-color: red;
position:fixed;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
}
.box2 {
background-color: green;
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
固定定位最经典的例子就是网页广告，无论你怎么滚动滚轮，广告始终固定在浏览器窗口的某个位置。
四、z-index
在定位流中有z-index属性，默认值为0，可将其设置为其他整数，用以表示覆盖效果，其遵循的原则是：
- 如果z-index不一样，则z-index大的标签会显示在z-index小的标签上面
- 如果z-index一样，则在html中靠后的标签显示在上面
- 如果父标签的z-index小于另一个父标签的z-index，则不再比较子标签的z-index，直接覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 50px;
height: 50px;
}
.box1{
background-color: red;
position: relative;
}
.box2{
background-color: blue;
position: relative;
top:-20px
}
.box3{
background-color: green;
position: relative;
top:-40px;
z-index: -1;
}
.box4{
background-color: yellow;
position: relative;
z-index: -1;
}
.box5{
background-color: pink;
position: relative;
top: 20px;
z-index:100;
}
.box6{
background-color: orange;
position: relative;
z-index:1;
}
.box7{
background-color: gray;
position: relative;
top: -20px;
z-index:1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
</div>
<div class="box6">
<div class="box7"></div>
</div>
</body>
</html>