HTML的定位属性

时间:2021-09-18 11:21:28

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时,只在内容超出层范围时才显示滚动条。
-->

 <!--
 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时,只在内容超出层范围时才显示滚动条。
 -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>HTML的定位属性</title>
 <style>
     a:hover{
         position:relative;
         left:1px;
         top:1px;
     }
     #main{
             width:300px;
             height:200px;
             background:red;
             position:absolute;
             left:%;
             top:%;
             margin-left:-150px;
             margin-top:-100px;
         }
 </style>
 </head>

 <body>
     <a href="#">aaaaaaaaaa</a><br />
     <a href="#">aaaaaaaaaa</a><br />
     <a href="#">aaaaaaaaaa</a><br />
     <a href="#">aaaaaaaaaa</a><br />
     <div id="main">
            aaaaaaa
     </div>
 </body>
 </html>