CSS的三种布局之定位（子绝父相）

通俗解释:

子元素在父元素上移动，前提是父元素必须有位置。而绝对定位和固定定位都是会造成脱标,不占有自己原来的位置。

<body><!-- 父盒子 --><div class=\"top\"><!-- 子盒子 --><div class=\"son\"></div></div><!-- 父盒子的兄弟盒子 --><div class=\"down\"></div></body>

<style>.top {position: absolute;width: 300px;height: 300px;background-color: pink;}.down {width: 400px;height: 400px;background-color: orange;}.son {position: absolute;width: 200px;height: 200px;background-color: black;}</style>

父盒子和子盒子都是绝对定位时，父盒子由于脱标导致不保留自己原来的位置，造成下面的盒子占用了父盒子原来的位置。

把父盒子修改为相对定位：

<style>/*子绝父相 父级必须有位置 不能脱标*/.top {position: relative;width: 300px;height: 300px;background-color: pink;}.down {width: 400px;height: 400px;background-color: orange;}.son {position: absolute;width: 200px;height: 200px;background-color: black;}</style>