共计 1681 个字符，预计需要花费 5 分钟才能阅读完成。
相对、绝对、固定定位三者区别
原文链接：https://note.noxussj.top/?sou…
失常布局
文档流布局形式，依照程序一个个排列好，成果如下图：
<html>
<head>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: #ff8077;
}
.box2 {
width: 100px;
height: 100px;
background-color: #5cd8a2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
相对定位
该元素脱离文档流，不参加布局一个个排列。齐全自在想去哪里就去哪里。写了相对定位就要写上 left 和 top。这两者默认是间隔文档左上角的间隔。
<html>
<head>
<style>
.box1 {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
height: 100px;
background-color: #ff8077;
}
.box2 {
width: 100px;
height: 100px;
background-color: #5cd8a2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
留神： 因为预览模式是模仿的，为了让小伙伴更好的观看，能够把灰色设想成就是文档局部 body 标签。而且 body 标签默认是自带了 8px 的 margin。
绝对定位
方才曾经介绍了相对定位能够通过 left 和 top 来管制间隔文档左上角的间隔，也就是说 left 和 top 是绝对于 “ 文档 ” 进行定位的。而绝对定位则是把这个绝对于 “ 某某元素 ” 进行批改。
<html>
<head>
<style>
.box1 {
position: absolute;
left: 20px;
top: 20px;
width: 100px;
height: 100px;
background-color: #ff8077;
}
.box2 {
position: relative;
width: 100px;
height: 100px;
background-color: #5cd8a2;
}
</style>
</head>
<body>
<div class="box2">
<div class="box1"></div>
</div>
</body>
</html>
把 box1 放进 box2 外面，并且给 box2 设置绝对定位 position: relative 那么 box1 的 left 和 top 就会绝对于 box2 的左上角原点。
固定定位
固定定位和相对定位很像，能够让元素飘起来，想去哪里去哪里。然而相对定位是绝对于 “ 某某元素 ” 进行定位的。而固定定位则是永远是绝对于 “ 浏览器可视区左上角 ”。只管呈现了滚动条也是丝毫不影响。
<html>
<head>
<style>
.box1 {
position: fixed;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: #ff8077;
}
.box2 {
position: relative;
width: 100px;
height: 100px;
background-color: #5cd8a2;
}
</style>
</head>
<body>
<div class="box2">
<div class="box1"></div>
</div>
</body>
</html>
能够发现只管 box1 在 box2 外面，并且 box2 也设置了绝对定位，box1 仍然间接忽视了，间接绝对于 “ 可视区左上角 ” 进行定位。
最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要在花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。
原文链接：https://note.noxussj.top/?sou…
