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. TCP与UDP

    TCP(Transmission Control Protocol,传输控制协议)是面向连接的协议:可靠.保证正确性:顺序到达:流量控制.拥塞控制:重传机制.窗口机制:对系统资源.时间要求多:流模式S ...

  2. Javascript的"预编译"思考

    今天工作需要,搜索下JS面试题,看到一个题目,大约是这样的 <script> var x = 1, y = z = 0; function add(n) { n = n+1;  } y = ...

  3. css清除浮动的处理方法

    根据<精彩绝伦的css> <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. CI框架 输入类

    1.$this->input->post() 第一个参数是所要取得的post中的数据: $this->input->post('some_data'); 如果数据不存在,方法将 ...

  5. ANGULAR 开发用户选择器指令

    在开发表单时,我们需要使用经常需要使用到用户选择器,用户的数据一般使用如下方式存储: 用户1,用户2,用户3   我们可以使用angular指令实现选择器. <!DOCTYPE html> ...

  6. linux查找文件命令find

    http://blog.csdn.net/ydfok/article/details/1486451 find 路径 -name'文件名' 如:find / -name '*dhcp*'

  7. VS2010 winform程序发布步骤

    1.右键单击解决方案,点击“添加”---“新建项目”,如下图: 2.选择“其他项目类型”--“安装和部署”--“Visual Studio Installer”---"安装项目", ...

  8. ASP.NET MVC的Ajax.ActionLink 的HttpMethod="Get" 一个重复请求的BUG

    这段时间使用BootStrap+Asp.net Mvc5开发项目,Ajax.ActionLink遇到一个重复提交的BUG,代码如下: @model IList<WFModel.WF_Temp&g ...

  9. [示例]创建Student类，输入学生信息并存入字典，将3个存有学生信息的字典存入数组，并计算

    代码: main: #import <Foundation/Foundation.h> #import "Student.h" int main(int argc, c ...

  10. java之io之file类的常用操作

    java io 中,file类是必须掌握的.它的常用api用法见实例. package com.westward.io; import java.io.File; import java.io.IOE ...