相对位置和绝对位置
现有3个div如下
<style>
.brother {
width: 200px;
height: 200px;
background-color: yellow;
}
.father {
width: 200px;
height: 200px;
background-color: green;
}
.son {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
<div class="brother"></div>
<div class="father">
<div class="son"></div>
</div>
需求是把蓝色的div放在绿色div的右边
实现效果如下
具体实现代码：
<style>
.brother {
width: 200px;
height: 200px;
background-color: yellow;
}
.father {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.son {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background-color: blue;
}
</style>
<div class="brother"></div>
<div class="father">
<div class="son"></div>
</div>
当一个元素设置为绝对定位 absolute时，会去找其标记了 position:relative的祖先作为参考系，以它为基准进行left right bottom 的偏移，若没找到，则以body标签作为参考系，即视口 x，y 坐标都为0的点
固定定位
标记了 position: fixed;的元素将脱离文档流，固定在视口（0，0）这个位置，以视口（0，0）这个坐标作为参考系
<style>
.fix {
width: 100px;
height: 100px;
background-color: blue;
/* 脱离文档流 */
position: fixed;
right: 0;
bottom: 50%;
}
</style>