position的relative和absolute属性

在对界面布局时,往往需要用到position属性。在W3C中,对position的定义是:规定元素的定位类型。

顾名思义,absolute代表绝对定位。在查阅了相关资料后,发现absolute定位是相对于其包含块(containing block)绝对定位,而这个包含块不一定是父级元素。例如,当父级元素没有设定position属性,而父级以上的某个祖先元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块。也就是说,一个元素的包含块是由其最近的 position 为 absolute / relative / fixed 的祖先元素决定的。如果没有找到,就以initial containing block的左上角进行定位(initial containing block:根元素外层的形状为矩形的元素)。

其“绝对”的含义,在我理解看来,是不受包含块的padding、margin值等影响的“绝对”。再配合该元素本身的Top、Right、Bottom、Left进行定位。

综上所述,absolute属性是用于设置子元素的位置的(相对于包含块)。

(关于绝对定位absolute的属性,可以点击 http://www.zhihu.com/question/19926700  ,2个票数最高的回答都非常精准)

relative代表相对定位。它始终参考父级元素的原始点为原始点,再配合该元素本身的Top、Right、Bottom、Left进行定位。如果没有父级,则以body为原始点。relative的设置效果是受父级元素的padding值等影响的。在实际使用中,我往往使用relative属性作为有absolute属性的子元素的父级。

此外,在设置了position属性后,还可以设置z-index以设置同级元素的上下层关系,数值越大就在上层。

文章末尾,推荐一篇关于CSS定位体系的文章,有助于对position及float属性的理解:http://www.w3help.org/zh-cn/kb/009/

时间: 09-26

position的relative和absolute属性的相关文章

布局模型 之 层模型(position的relative、absolute与fixed区别?)

css的布局模型分为流动模型(Flow).浮动模型(Float).层模型(Layer). 浮动模型(Float)和层模型(Layer)有什么显著区别?     浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动:浮动的元素仍然会占据文档流的物理空间.关于浮动模型的详细说明请看另一篇文章的介绍.http://ycgit.blog.51cto.com/8590215/1958452 层模型(Layer):设置为层模型的元

关于通过jquery来理解position的relative及absolute

一个多月前刚刚开始系统接触Javascript/css/html的时候一直对position属性的relative及absolute不是很了解.今天在接触jquery中无意间发现通过slideToggle() 的滑动效果可以更加方便清楚的了解position属性的含义.下面是代码. <!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.

position的relative 和 absolute 的区别个人见解

position:relative是相对原来的位置相对移动,absolute 是相对于父元素的位子移动,这里面我个人对position:relative不是很熟悉所以只是截了这个图,有什么说得不对请指正

css中的position:relative和absolute 属性

语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依据 body 对象.而其层叠通过 z-index 属性定义 fixed :未支持.对象定位遵从绝对(absolute)方式.但是要遵守

IE6 下关于Position:absolute;属性对同级元素的影响问题

今天小码哥做一个专题页面的时候,碰到一个关于IE6下position:absolute:属性对同级元素的margin属性有影响的问题.虽然,作为前端人员,IE6下的Bug问题,始终让人头疼不已.但生活在Zhong国的码民们只能继续忍受. 言归正传,是什么问题呢? 即:假如在一个设有position:relative:相对定位属性的div盒子里,同时放另外两个div块级元素layer2,layer3.layer2设有position:absolute:属性,layer3设有margin:30px

position属性值之relative与absolute

两者共同特点是: 改变文档流 激活元素left.top.right.bottom.z-index属性 让元素”浮起来“,z-index>0 不同的是: 1.position:relative 会保留元素自己在z-index:0层的占位,其left.top.right.bottom是相对于自己在z-index:0层的位置. 2.position:absolute 完全脱离文档流,不保留元素自己在z-index:0层的占位,其left.top.right.bottom是相对于自己最近的定义为abso

[转载]position的四个属性值: relative ,absolute ,fixed,static

position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id></div> 1. relative relative属性相对比较简单,我们要搞清它是相

position的四个属性值: relative ,absolute ,fixed,static

position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id></div> 1. relative relative属性相对比较简单,我们要搞清它是相

CSS 中 Position relative 和 absolute区别

Relative Positioning A relative positioned element is positioned relative to its normal position. The reserved space for the element is still preserved in the normal flow. relative 位置是相对元素的父元素的位置.left, top 是相对其父元素进行调整, 但是位置还是和DOM中的看起来一致(in normal flo