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>

HTML的定位属性的更多相关文章

  1. css10定位属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  3. CSS属性：定位属性（图文详解）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...

  4. Css3 笔记 动画 和定位属性

    transform 变形属性属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个参数对应X轴,第二参数对应Y轴:如 ...

  5. 定位属性position

    定位属性position小结 1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...

  6. H5 36-背景定位属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS（八）：定位属性

    一.position属性 1.relative(相对定位) 相对它原来的位置,通过指定偏移,到达新的位置. 扔在标准流中,它对父级盒子和相邻的盒子都没有任何影响. 看下面的例子: <!DOCTY ...

  8. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  9. CSS定位属性

                  定位属性                                                              position属性 1.      s ...

随机推荐

  1. [maven] pom.xml 文件详解

    参考资料: http://blog.csdn.net/uohzoaix/article/details/7035307 http://www.cnblogs.com/qq78292959/p/3711 ...

  2. hdu---(Tell me the area)（几何/三角形面积以及圆面积的一些知识）

    Tell me the area Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. 如何判断一个Div是否可视区域，判断div是否可见

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css3 keyframes animation

    html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img ...

  5. Objective－C（二、类和对象）

     类和对象 #import是include的升级版,可以自动防止重复包含,所以注意:大家以后在引入头文件的时候都使用import Foundation是一个框架,Foundation.h是Founda ...

  6. JavaScript 事件委托的技术原理

    如今的 JavaScript 技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们 ...

  7. 原生JS 添加或者删除某个class

    $S.addHandler($S.getId(fav[i]),'mouseover',function(){                this.className += " " ...

  8. 数组越界保护与消息传递black机制

    数组越界保护if(index.row <= [array count]) 发送消息[[NSNotificationCenter defaultCenter]     postNotificati ...

  9. bzoj 2428: [HAOI2006]均分数据

    #include<cstdio> #include<iostream> #include<cstdlib> #include<ctime> #inclu ...

  10. HDU 1394 树状数组求逆序对

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...