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. [saiku] 配置saiku实时展现查询数据

    缘起: 在默认的情况下,saiku是不能对数据进行实时展现的,只能通过刷新按钮或者重启服务器来刷新数据 这样以来会有很多的麻烦,每天得手动去刷新,这个操作只有管理员可以操作,在刷新以前客户看到的都是缓 ...

  2. C语言中static变量详解

    Static翻译出来是“静态”“静止”的意思,在C语言中的意思其实和它的本意差不多,表示“静态”或者“全局”的意思,用来修饰变量和函数.经static修饰过后的变量或者函数的作用域或者存储域会发生变化 ...

  3. 使用Node.js实现数据推送

    业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的 ...

  4. MySQL索引实现

    摘自:http://blog.codinglabs.org/articles/theory-of-mysql-index.html 在MySQL中,索引属于存储引擎级别的概念,不同存储引擎对索引的实现 ...

  5. [整]常用的几种VS编程插件

    通过这些编程插件,你可以方便快捷的完成编程的各项任务,以下分别作下简单介绍,欢迎讨论交流. Visual Assist(强烈推荐)网址:http://www.wholetomato.com/功能:VA ...

  6. netbios wins dns LLMNR

    NetBIOS名称 Network Basic Input/Output System  (RFC-1001,1002)网络基本输入/输出系统协议 NetBIOS是一种高级网络接口,最初是在硬件中实 ...

  7. Split的应用

    public string qu(string ss) { string s1 = "" ; string[] s = ss.Split(); for (int i = 0; i ...

  8. js里面引入js

    document.write('<script src="http://js.xcar.com.cn/bbs/sidebar/js/publicSidebar.js"> ...

  9. ASP.net 验证码(C#) MVC

    ASP.net 验证码(C#) MVC http://blog.163.com/xu_shuhao/blog/static/5257748720101022697309/ 网站添加验证码,主要为防止机 ...

  10. 近期C++编译问题汇总

    编译c++ 代码中遇到几个问题,汇总一下: 1.编译openssl 遇到问题如图 ,  原因:不支持汇编编译,在perl编译指令中加入: no-asm , 如:perl Configure VC-WI ...