!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS中的盒子模型</title><style>body {margin: 0;}.d1 {width: 300px;height: 300px;background-color: greenyellow;position: relative;left: 50px;top: 50px;margin: 20px;border: 10px solid black;padding: 20px;}#d2 {width: 200px;height: 200px;background-color: red;}#d1 {width: 300px;height: 300px;background-color: greenyellow;position: absolute;left: 0px;top: 0px;margin: 20px;border: 10px solid black;padding: 20px;}</style></head><body><div class="d1">div1</div><div id="d2">div2</div><div id="d1">我是div1的实际占位</div></body></html>
先看效果图:
absolute 不占位 不会影响其他元素的位置
relative 如果有 top right left buttom 等属性使其发生位移 但其实际占位为原位置并不是页面显示位置
首先解释下上图为什么这么显示
代码中先写的dvi1 相对定位并且发生位移 他的父级元素为body 所以相对body进行移动为所以最终显示为绿色div所在位置
其次代码中是div2 div是块标记会自动换行所以他的默认位置应该为上一元素的下边也就是div1的下边
但是又因为 div1是相对定位 其真实占位应该为空白div位置所以div2正好在其下边显示
需要注意的是如果2个盒子模型都有margin 只有大的margin的占位 (谁的margin大谁占位并不是2个都占位)
如果需要算红色div距离顶部的距离 直接算div的高度就行
(注意考虑body的margin 是不是0 谷歌默认8px 还有是不是2个盒子模型都有margin)
此图中 距离应该为 body的margin为0只有一个盒子有margin 所以 距离就为div1的高度也就是height+padding*2+border*2+margin*2=400px
