CSS定位中Positoin、absolute、Relative的一些研究

Positoin属性有四个值： static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的，顾名思义，absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。
　　但是，怎么个绝对法，又怎么个相对法呢？以前我一直没有仔细去研究它，到具体应用时有时会有点迷糊，我相信很多朋友也会有这样的问题。今天我特意测试了一下，得出了以下结论：

1、当Positoin属性值为Relative时
对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时，只有Top起作用。

left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时，只有left起作用。

2、当Positoin属性值为absolute时
对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。

left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。

　　在Positoin属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一视同仁，^_^）的Positoin属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。
　　更多有关CSS的说明请参考手册：http://www.jb51.net/shouce/css/index.html
　　辛苦了半天得出的结论，希望对大家有用。如果有疏忽之处，还请指正。

赞 (0)

相关推荐

  • javascript下操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可.  如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可.  如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.styl

  • css 跨浏览器实现float:center

    复制代码 代码如下: <div id="macji"> <ul class="macji-skin"> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ul> </div> 我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知).可以设置ul的text-align:center,再设置li的displ

  • relative absolute无法冲破的等级问题解决第1/3页

    前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:  复制代码 代码如下: <ul>   <li>第一块</li>   <li><span>第二块</span></li>   <li>第三块</li>   <li>第四块</li>   <li>第五块</li>   </ul> 如果我我们设定LI为position:r

  • 解决rs.absolutepage=-1的问题

    有时候在做asp的分页程序的时候会遇到无法分页的情况,就试着把rs.absolutepage打印出来结果却一直为-1. 下面介绍一种解决方案: .......省略 rs.cursorlocation=3 '就是加上这行 rs.open sql,conn,3,2 rs.pagesize=10 if not rs.eof then rs.absolutepage=1 end if pagecount=rs.pagesize .........省略

  • css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab

  • 详细分析css float 属性以及position:absolute 的区别

    详细分析css float 属性以及position:absolute 的区别

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块级元素,会单独占据一行. 先看看最基本的块级元素如何排列的.html代码,以下样式都是基于此. 复制代码 代码如下: <div class="boxBg">        <div class="box1">        框框1       

  • position:relative/absolute无法冲破的等级

    注:本文实例在IE5.x下可能会显示不出来,请使用IE6.IE7.Firefox.Opera等浏览器来调试! 前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:  复制代码 代码如下: <ul>   <li>第一块</li>   <li><span>第二块</span></li>   <li>第三块</li>   <li>第四块</li>   <

  • javascript css float属性的特殊写法

    1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等. 这个规律我想大多数的前

  • javascript css styleFloat和cssFloat

    下面是兼容性代码 复制代码 代码如下: LTFunction.setFloatStyle=function(obj,style) { var sty=obj.style; if('cssFloat' in sty){ obj.style.cssFloat=style; }else if('styleFloat' in sty){ obj.style.styleFloat=style; }else{ throw 'set float style:'+style+'error.'; } }

  • Div CSS absolute与relative的区别小结

    详细讲解两者的关系,需要配合例子,请先看例子: 以下是引用片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>

  • CSS中Float（浮动）相关技巧文章

    Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的. 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂.大多数问题都是由于老版本的IE带来的(我只是猜想).如果你知道这些bug,你就能避免这些问题. 让我们尝试去解决这些问题并澄清一些以前使用浮动的误解.我们参考了成打的相关文章,并选取了最为重要的一些你必须了解的

随机推荐