检索或设置对象的定位方式。
设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局。假如其他具有不同z-index属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有margin,但仍有padding和边框border。
要激活对象的绝对定位,不但要设置此属性值为absolute,而且必须指定left,right,top,bottom属性中的至少一个。否则上述属性会使用他们的默认值auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。
设置此属性值为relative 会保持对象在正常的HTML流中,但是会根据对象本身原来的位置进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。
对应的脚本特性为position。
语法结构:
position:static | relative | absolute | fixed
取值:
static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用,默认值。
relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。
absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。IE6不支持此属性值。
浏览器支持:
IE浏览器支持此属性。
火狐浏览器支持此属性。
谷歌浏览器支持此属性。
opera浏览器支持此属性。
注意:IE6不支持fixed属性值。
继承性:
没有继承性。
实例代码:
实例一:
position属性-蚂蚁部落 .mytest{ width:200px; height:100px; border:1px solid blue; position:static; top:40px;}蚂蚁部落欢迎您
查看更多关于CSS的position属性_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did109873