Position属性之relative用法

Position属性之relative用法

相对是位置的一个属性,是相对定位。本文介绍了位置属性的相对用法,对位置属性相关知识感兴趣的朋友可以一起学习。

相对是位置的一个属性,是相对定位。

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的元素不仅改变了它们的位置,而且脱离了文档流。

Position:relative在日常应用中一般设置为position:absolute;的父层的,父层位置:相对;副处级职位:绝对;它根据父层的边界定位;否则,position:absolute将逐层搜索position:relative元素集的边界,直到body元素。

写一个例子如下:

Html代码

静态:默认值。没有特殊定位,对象遵循HTML定位规则。

Absolute:将对象拖出文档流,并使用左、右、上、下等属性。相对于具有最多定位设置的最近父对象进行绝对定位。

如果没有这样的父对象,则依赖于body对象。它的堆栈由z-index属性定义。

已修复:不支持。对象定位遵循绝对方式。但是有一些规则要遵守。

相对:对象不能堆叠,但是它们将根据左、右、上、下和其他属性在正常的文档流中偏移。

quality= high type= application/x-shock wave-flash plugin page= http://www . macromedia . com/go/getflash player

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Strict . DTD

html xmlns= http://www . w3 . org/1999/XHTML

meta http-equiv= content-type content= text/html;charset=utf-8

头衔职位/头衔

style type=text/css

!-

正文{

字体大小:12px

边距:0自动;

}

div #演示{

位置:相对;

边框:1px纯色# 000;

边距:50px

top:-50px;

行高:18px

溢出:隐藏;

明确:两者都有;

身高:1%;

}

部门#sub{

位置:绝对;

右:10px

top:10px;

}

相对部门{

位置:相对;

左:400px

top:-20px;

}

静态分区、固定分区、绝对分区、相对分区{

宽度:300px

}

静态分区{

背景色:# bbb

位置:静态;

}

部门固定{

背景色:# ffc 0 CB;

}

绝对分区{

背景色:# b0c4de

}

相对部门{

背景色:# ffe4e1

}

-

/风格

/头

身体

div id=demo

Div= static static:默认值。没有特殊定位,对象遵循HTML定位规则/div。

div= sub class= absolute absolute:将一个对象拖出文档流,并使用左、右、上、下等属性。相对于具有最多定位设置的最近父对象进行绝对定位。如果没有这样的父对象,则依赖于body对象。它的堆栈由z-index属性/div定义。

不支持。对象定位遵循绝对方式。但是有一些规则/div要遵守。

Class= relative relative:对象不能堆叠,但是在正常的文档流中会根据左、右、上、下等属性进行偏移。/div。

/div

/body

/html

以上是边肖共享的位置属性的相对用法的完整说明。我希望你喜欢它。

Position属性之relative用法