absolute与relative的完美区别

《absolute与relative的完美区别》由会员分享，可在线阅读，更多相关《absolute与relative的完美区别（3页珍藏版）》请在金锄头文库上搜索。

1、absolute 与 relative 的完美区别absolute 与 relative 怎么区分，怎么用？我们都知道 absolute 是绝对定位，relative 是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读Absolute，CSS 中的写法是：position:absolute;他的意思是绝对定位，他是参照浏览器的左上角，配合 TOP、RIGHT 、BOTTOM 、LEFT(下面简称 TRBL)进行定位，在没有设定 TRBL，默认依据父

2、级的做标原始点为原始点。如果设定 TRBL 并且父级没有设定position 属性，那么当前的 absolute 则以浏览器左上角为原始点进行定位，位置将由 TRBL 决定。一般来讲，网页居中的话用 Absolute 就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute 则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与 Relative 很相似，但是还是有本质的区别的。Relative，CSS 中的写法是： position:relative;他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序

3、在上一个元素的底部为原始点，配合 TRBL 进行定位，当父级内有 padding 等 CSS 属性时，当前级的原始点则参照父级内容区的原始点进行定位。有时我们还需要依靠 z-index 来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。但是 z-index 也不是万能的，z-index 也受到了等级的限制。我们都知道，position 有四个不同的值，分别为：static | absolute | fixed | relative1. static:无特殊定位，对象遵循 HTML 定位规则；2. absolute:将对象从文档流中拖出，使用 left，right ，top，botto

4、m 等属性进行绝对定位。而其层叠通过 z-index 属性定义。此时对象不具有边距，但仍有补白和边框；3. relative:对象不可层叠，但将依据 left，right，top ，bottom 等属性在正常文档流中偏移位置；4. fixed:IE5.5 及 NS6 尚不支持此属性。但是要想改变对象的层叠位置需要的是另一个 CSS 属性：z-index。但是这个 z-index 并非是无所不能的，他受到了 HTML 代码等级的制约。z-index 只能在同等级的 HTML 上体现他的作用。这里需要声明的是 z-index 只有在对象的 position 值为 relative/absolute

5、 时才可以使用。下面我们就举些例子来解释等级的特性：Html 代码:这是第一个块这是第二个块Css 样式:#a,#b position:absolute; width:300px; height:100px; #a z-index:10; left:0; top:0; background:#000; #b z-index:1; left:20px; top:20px; background:#c00; 以上情况#a 与#b 的层叠等级是可以通过 z-index 来设定的。这是没问题的，那么什么样的情况下就会出现问题呢？我们再看一个实例：Html 代码 :这是第一个块这是第二个块Css 代码

6、：#box_1, #box_2 position:relative; width:300px; height:100px; margin:10px; background:#ddd;#a, #b position:absolute; width:100px; height:300px; #a background:#c00; z-index:100; #b background:#0c0; z-index:1; left:50px;这时候我们看,不论#a 设为多大的值 ,他都无法超过#b,所以说 z-index 是无法冲破 HTML 的等级的,他必需是要同等级的状态下才可以发挥威力.那么如何解

7、决这个问题呢?我可以反过来想,堂兄弟之间的顺序不能被重组,何不把父辈的等级做一次重组呢?所以我们把#box_1 的 CSS 中加入一个 z-index:100; 在#box_2 的 CSS 中加入 z-index:1;这样再看一下效果 :#box_1, #box_2 position:relative; width:300px; height:100px; margin:10px; background:#ddd;#box_1 z-index:100;#box_2 z-index:1;#a, #b position:absolute; width:100px; height:300px; #a background:#c00; #b background:#0c0; left:50px;这是指定父级重组了层叠的顺序,如果要是没有办法一一指定父级的顺序重组。 。 。时间问题，没有测试。 。 。