关于css 中 position:relative 的理解

原创 2016年08月29日 09:28:29

初看CSS,就觉得五花八门。效果实现途径很多。

而 对 position:relative 有疑问。

position:relative  的意思是它占据当前文档流的位置,但可以让它的显示相对地移动。比如之后添加 top:5px; left:5px; 就向右向下移动了一点。

但文档流中的位置还是原来的。

这就很难受了。你不在这,却占据这里的位置,你让想到这里的人怎么办。

所以我认为以position:relative 之后,不要加top,right 等让它偏移的东西。

那要它有何用。

你可以在它的子元素内设置position:absolute。然后加top,left 之类。

因为absolute 的绝对偏移是相对与已定位的祖先元素,所以只要包裹它的元素是有position:relative,

它就相对祖先元素定位,而这个距离在各浏览器上都一致。

简言之,让一个框不脱离文档流,让框里的内容固定在框的某位置。即使移动了整个框,也是同样效果。

版权声明:本文为博主原创文章,未经博主允许不得转载。

【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧...

css position: absolute、relative详解

CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经...

CSS position绝对定位absolute relative

CSS position绝对定位absolute relative          DIV CSS position绝对定位absolute relative教程篇 常常使用...

css中position的absolute与relative的使用

position的absolute与relative都会使文档脱离正常文档流,absolute为绝对定位,相对于浏览器定位,而relative是相对于上一级标签定位...

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,

position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章...

请教CSS中的position:relative;的作用

对于position的其它几个属性,我都搞懂了  引用 static :  无特殊定位,对象遵循HTML定位规则  absolute :  将对象从文档流中拖出,使用left,rig...

简单说一下CSS的position常用的三个属性:relative,absolute以及fixed,以及嵌套使用的一个常见情况

首先要清楚,position需要top,bottom,left,right来配合实现定位,当然根据实际情况,不必要把四个方向的定位全写出来。 举个例子。 position:absolute; top:...

css中position属性(absolute|relative|static|fixed)解析

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵...

CSS-position:static/relative/absolute/fixed定位

css position:static/relative/absolute/fixed 定位

css层的定位position、absolute、relative层叠加的五条叠加法则

css层的定位position、absolute、relative层叠加的五条叠加法则 貌似很多同学对为什么这个div在上层,那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于css 中 position:relative 的理解
举报原因:
原因补充:

(最多只允许输入30个字)