CSS position中 绝对定位和相对定位的区别以及占位问题

!DOCTYPE html>

	
		
		CSS中的盒子模型
		
	
	
		
div1
div2
我是div1的实际占位

先看效果图:

CSS position中 绝对定位和相对定位的区别以及占位问题_第1张图片

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

你可能感兴趣的:(CSS,CSS)