HTML的定位属性

position 用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）

top
层距离顶点纵坐标的距离

left
层距离顶点横坐标的距离

width
层的宽度，可以用一个长度或“auto”值来指定其宽度，不允许使用负值

height
层的高度，可以用一个长度或“auto”值来指定高度，不允许使用负值

z-index
决定层的先后顺序和覆盖关系，值高的元素会覆盖比较低的元素

display
是一个显示属性，设定block值是以块显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。如果设定inline值则内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示。

visibility
这个属性针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用visible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏。

overflow
用于设置层内的内容超出层所容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用auto时，只在内容超出层范围时才显示滚动条。
-->

 1 <!--
 2 position    用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）
 3 
 4 top
 5 层距离顶点纵坐标的距离
 6 
 7 left
 8 层距离顶点横坐标的距离
 9 
10 width
11 层的宽度，可以用一个长度或“auto”值来指定其宽度，不允许使用负值
12 
13 height
14 层的高度，可以用一个长度或“auto”值来指定高度，不允许使用负值
15 
16 z-index
17 决定层的先后顺序和覆盖关系，值高的元素会覆盖比较低的元素
18 
19 display
20 是一个显示属性，设定block值是以块显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。如果设定inline值则内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示。
21 
22 visibility
23 这个属性针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用visible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏。
24 
25 overflow
26 用于设置层内的内容超出层所容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用auto时，只在内容超出层范围时才显示滚动条。
27 -->
28 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
29 <html xmlns="http://www.w3.org/1999/xhtml">
30 <head>
31 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
32 <title>HTML的定位属性</title>
33 <style>
34     a:hover{
35         position:relative;
36         left:1px;
37         top:1px;
38     }
39     #main{
40             300px;
41             height:200px;
42             background:red;
43             position:absolute;
44             left:50%;
45             top:50%;
46             margin-left:-150px;
47             margin-top:-100px;
48         }
49 </style>
50 </head>
51 
52 <body>
53     <a href="#">aaaaaaaaaa</a><br />
54     <a href="#">aaaaaaaaaa</a><br />
55     <a href="#">aaaaaaaaaa</a><br />
56     <a href="#">aaaaaaaaaa</a><br />
57     <div id="main">
58            aaaaaaa
59     </div>
60 </body>
61 </html>