qichunren 2008-10-29 19:24
浏览 325
已采纳

请教CSS中的position:relative;的作用。

对于css中的[color=red]position:relative;[/color]我始终搞不明白它是什么意思,有什么作用?

对于position的其它几个属性,我都搞懂了
[quote]
static :  无特殊定位,对象遵循HTML定位规则
absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed :  IE5.5及NS6尚不支持此属性
[/quote]

对于文档中所说的几个属性,除了relative,其它的一试,就效果出来了,对于个[b]relative[/b],真是难理解。

要说是相对定位嘛,也不是。

对于页面中一个static的div#demo,我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该是用这个position:relative这个吧,然后再加上top,right给限制一下。
我理解得没有错吧?

不过在现实开发中,我却常常 得不到预期的效果。我觉得应该是我对这个属性还没有理解透。现在我想完全掌握这个,就像position:absolute那样地掌握它,想怎么弄html元素就怎么弄HTML元素。
请理解这一点的朋友们给讲讲,或者给点资料,链接之类 的也可以。

谢谢您们。
[b]问题补充:[/b]
谢谢您 提供的链接,不过它没有深度,我希望得到position:relative的详细的理解。
[b]问题补充:[/b]
reeze,你说的这一点很好。
不过,对于声明了这属性的本身的元素的定位呢?它自身的top,left,right,bottom有什么作用?
你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。
[b]问题补充:[/b]
就没有大大给点根本的解释吗?

  • 写回答

13条回答 默认 最新

  • iteye_21028 2008-11-02 20:48
    关注

    "对于页面中一个static的div#demo,我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该是用这个position:relative这个吧,然后再加上top,right给限制一下。
    我理解得没有错吧? "

    首先对你疑惑的地方,我先解答一下:
    position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static)

    如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。

    absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位的。

    relative是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

    另:relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。

    写了个例子如下:

    [code="html"]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">




    position <!-- body{ font-size:12px; margin:0 auto; } div#demo{ position:relative; border:1px solid #000; margin:50px; top:-50px; line-height:18px; overflow:hidden; clear:both; height:1%; } div#sub{ position:absolute; right:10px; top:10px; } div.relative{ position:relative; left:400px; top:-20px; } div.static,div.fixed,div.absolute,div.relative{ width:300px; } div.static{ background-color:#bbb; position:static; } div.fixed{ background-color:#ffc0cb; } div.absolute{ background-color:#b0c4de; } div.relative{ background-color:#ffe4e1; } -->




    static: 默认值。无特殊定位,对象遵循HTML定位规则

    absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义

    fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

    relative:对象不可层叠,但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置




    [/code]
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(12条)

报告相同问题?

悬赏问题

  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机