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

!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

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

CSS中，position的绝对定位和相对定位的区别
CSS中,position的绝对定位和相对定位的区别 1.position的四个值:static.relative.absolute.fixed 绝对定位:absolute和fixed统称为绝对定位 ...
CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一.绝对定位二.相对定位三.绝对定位与相对定位的区别四.绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些 ...
DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
css中的定位以及绝对定位和相对定位的区别
一:绝对定位 (position: absolute) 绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是 ...
关于绝对定位与相对定位的区别和用法
Hello大家好,我们这次来详细说下关于绝对定位以及相对定位的知识. 相对定位及其用法顾名思义相对定位的意思是相对于该控件相对于之前的位置进行偏.相对定位的css样式代码是这样的:position: ...
绝对定位和相对定位的区别（详解）
一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
绝对定位和相对定位的区别
相对定位与绝对定位相对定位绝对定位相对定位每一个元素都可以看作一个盒子,文档流就是由这些盒子堆砌而成,而每个盒子都在这个文档流中占据了一个位置,如果我们把这个盒子设置成相对定位,那么就可以拿起 ...
绝对定位和相对定位的区别？
一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
CSS position: absolute 绝对定位精讲
本文要点 1. 绝对定位元素文档流: 2. 绝对定位元素定位参照对象: 3. 绝对定位元素的自动伸缩: 4. 绝对定位元素实现垂直居中: 绝对定位基本特征绝对定位的第一个特征在于会从文档流中脱离,不 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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