定位流
文章目录
- 定位流
- 一、相对定位
- 二、绝对定位
- 三、固定定位
- 四、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>
