position属性的absolute和relative的理解

概述：

每个定位的意义：相对定位是“相对于“元素在文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的祖先元素。

主要：

（其实对于定位的理解，主要问题是要记住每个定位的意义。）

absolute（绝对定位）以窗口做为定位
relative以自身的占位为基线做偏移！
如果想absolute（绝对定位）能以父层做为定位基线的话，则在父层应用absolute或relativ属性就可以!

3.eg：

<div id=posi style=”position：relative”><div id=rel> 此层应用position：relative;bottom：30px;样式 </div><div id=abs> 此层只应用position：absolute;bottom：30px;样式 </div></div>

注意：
{1）、以上代码：id为posi的层，也可以用absolute属性！id为rel的层，不受影响，以自身的占位为基线做偏移！2）、id为abs的层是以id为posi层的底边做为定位基线，如果此时posi层的高度小于30px的话，abs层可能没办法看到哦！
}

详解：

设置此属性值为 relative
会保持对象在正常的HTML流中，
但是它的位置可以根据它的前一个对象进行偏移。
在相对(relative)定位对象之后的文本或对象占有他们自己的空间,
而不会覆盖被定位对象的自然空间。

与此不同的，
在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前,
会占有它的自然空间。

放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。
而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

补充注意点：

父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。
设置此属性值为 absolute 时，此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框(
border )。
设置此属性值为 relative 时，相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。

absolute与relative两者具体定义如下：

【1】
当设定position:absolute
1、如果父级（无限）没有设定position属性，
那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位
2、如果父级（无限）设定position属性，
那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。
【2】
当设定position: relative
则参照父级（最近）的【内容区的左上角为原始点】结合TRBL属性进行定位
（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），
无父级则以BODY的左上角为原始点。

CSS2.0 HandBook上的解释：

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。
假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。
此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。

要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，
并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，
这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

position属性的absolute和relative的理解相关推荐

css中position属性（absolute/relative/static/fixed）
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
position中的absolute与relative的区别
Position(位置)属性值需要注意的地方 position的属性有: Absolute:绝对定位,是相对于最近的且不是static定位的第一个父元素来定位,元素位置通过"right&qu ...
CSS的定位 position属性的 absolute relative static fixed的区别及用法
CSS中position一般是跟盒子结合做出效果的,浮动可以实现盒子在横向上的排列,但是如何实现在盒子上重叠另一个盒子的效果呢?就需要CSS的position来实现 position属性有四个,分别有 ...
探究position定位中absolute和relative的异同
相信学过CSS的同学都曾经对于position的各种属性很困惑,尤其是absolute和relative定位,简直就是傻傻分不清,笔者写这篇文章就是希望通过代码实验的方式来揭露absolute和rel ...
htm——position:static、absolute、relative详解
前言接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
position属性：absolute
absolute属性会导致元素脱离文档流 eg:当没有加入position: absolute属性时,body元素有宽高加上:position: absolute; body的高度为0:
Position属性四个值：static、fixed、absolute和relative的区别和用法
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
css中position的两种定位（absolute、relative）
[position:absolute] 意思是:绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位. 如果没有TRBL,以父级的左上角,在没 ...
html中position属性默认值,CSS position 属性总结
CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~ 下面是总结内容~ 有疏漏.错误之处敬请指出!o(^▽^)o 一.简介定义:posi ...

position属性的absolute和relative的理解

概述：

主要：

详解：

补充注意点：

absolute与relative两者具体定义如下：

CSS2.0 HandBook上的解释：

position属性的absolute和relative的理解相关推荐

最新文章

热门文章