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. nodeschool.io 7

    ~~ HTTP CLIENT ~~ Write a program that performs an HTTP GET request to a URL provided toyou as the f ...

  2. Servlet复习1: 一个简单的Servlet的使用

    Servlet学习 1. Servlet与JSP的关系 2. Servlet的声明周期 3. 一个简单的Servlet的使用方法 什么是Servlet? 什么又是JSP? 继承了javax.servl ...

  3. 解决li在ie,firefox中行高不一致问题

    转载 http://www.cnblogs.com/jikey/archive/2011/11/13/2247543.html li在ie与firefox的高度是不一样的,解决办法是li font-s ...

  4. java 多线程——一个定时调度的例子

    java 多线程 目录: Java 多线程——基础知识 Java 多线程 —— synchronized关键字 java 多线程——一个定时调度的例子 java 多线程——quartz 定时调度的例子 ...

  5. 数据库索引<二> 补充前篇 （上一篇抽风了，这个补上)

    在前一个创建索引中已经大概说了三部分的影响,基本应该注意哪一些.写完上一篇后我感觉有很多地方没有写清楚,所以这篇就是更深入一些的理解索引到底是怎么和数据表关联,怎么快速查询的. 先看一下下面的图,图是 ...

  6. 328. Odd Even Linked List——多利用fake_head

    Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...

  7. JVM优化之调整大内存分页(LargePage)

    转自:http://cjjwzs.iteye.com/blog/1059381 本文将从内存分页的原理,如何调整分页大小两节内容,向你阐述LargePage对JVM的性能有何提升作用,并在文末点明了大 ...

  8. BZOJ3308 九月的咖啡店

    Orz PoPoQQQ 话说这题还有要注意的地方... 就是...不能加SLF优化,千万不能加 n = 40000,不加本机跑出来2sec,加了跑出来40sec...[给跪了 /*********** ...

  9. Asp.Net MVC EF各版本区别

      2009年發行ASP.NET MVC 1.0版 2010年發行ASP.NET MVC 2.0版,VS2010 2011年發行ASP.NET MVC 3.0版+EF4,需要.Net4.0支持,VS2 ...

  10. Python 2.7教程

    参考:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000