导航

毅博客

分享本身就是件快乐的事,我因别人得到帮助而感到幸福

« 关于CSS hack的思考破残更是一种美丽 »

解读absolute与relative

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
请大家帮忙:行文措辞难免有错,请大家在阅读时发现错误通过评论方式告诉我。谢谢大家

很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。

Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。

Relative,CSS中的写法是:position:relative;  他的意思是相对定位,他是参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元素的底部为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。但是z-index也不是万能的,z-index也受到了等级的限制,关于这个等级的限制请查看《无法冲破的等级

作者 / 振之
网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295
  • quote 1.菜鸟
  • 看了你的关于绝对与相对定位,我自己也试了试,想下面这种情况是没问题的
    body{

    }
    #a{
    width:500px;
    height:500px;
    background:#eee;
    position:absolute;
    }
    #a1{
    left:50px;
    top:50px;
    position:relative;
    width:100px;
    height:100px;
    background:#c00;
    }
    #a2{
    left:300px;
    top:250px;
    position:relative;
    width:100px;
    height:100px;
    background:#ce0;
    }

    <div id="a">
    <div id="a1">a1</div>
    <div id="a2">a2</div>
    </div>

    但是我如果将id="a"那一层居中呢,我在样式中加了
    body{text-align:center;}
    #a{margin:0 auto}
    这时效果就不对了,我要的效果只是a居中,而它里面的内容位置应该保持不变的,请问这应该如何解决呢,为什么会这样呢
  • 2006-10-11 16:29:30 回复该留言
  • quote 4.fantasy
  • 谢谢,支持!明白了一些:)
    另外,请问这个问题你有办法解决没...
    http://bbs.blueidea.com/thread-2694841-1-1.html
  • 2006-11-17 17:09:07 回复该留言
  • quote 6.香烟
  • 我是一名刚毕业的学生,我被学校分配在一家网络公司实习,可来了以后却是自学。
    我想问问各位前辈以我现在的情况应该怎么办呢?
  • 2007-8-25 17:45:33 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog .Theme from Google黑板报 By Washun

Copyright 2005-2007 Jonmax.com. All Rights Reserved.

Search

最新评论及回复

最近发表

资助者链接