对于css中的position:relative;我始终搞不明白它是什么意思,有什么作用?
对于position的其它几个属性,我都搞懂了
引用
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed : IE5.5及NS6尚不支持此属性
对于文档中所说的几个属性,除了relative,其它的一试,就效果出来了,对于个relative,真是难理解。
要说是相对定位嘛,也不是。
对于页面中一个static的div#demo,我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该是用这个position:relative这个吧,然后再加上top,right给限制一下。
我理解得没有错吧?
不过在现实开发中,我却常常 得不到预期的效果。我觉得应该是我对这个属性还没有理解透。现在我想完全掌握这个,就像position:absolute那样地掌握它,想怎么弄html元素就怎么弄HTML元素。
请理解这一点的朋友们给讲讲,或者给点资料,链接之类 的也可以。
谢谢您们。
问题补充:
谢谢您 提供的链接,不过它没有深度,我希望得到position:relative的详细的理解。
问题补充:
reeze,你说的这一点很好。
不过,对于声明了这属性的本身的元素的定位呢?它自身的top,left,right,bottom有什么作用?
你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。
问题补充:
就没有大大给点根本的解释吗?
“对于页面中一个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的元素不仅位置改变了,同时也脱离了文档流。
写了个例子如下:
立即学习“前端免费学习笔记(深入)”;
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">position static: 默认值。无特殊定位,对象遵循HTML定位规则absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范relative:对象不可层叠,但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置
登录后复制
以上就是分享CSS中的关于position:relative;有什么作用?的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3122640.html