这个练习主要简单的展示了据对定位和相对定位；

在此说下html的定位：

1.static定位

这个是默认的方式。对static而言。left和right是不生效的。

2.relative定位（相对定位）

元素框偏离自身流相应的位置（靠left和top定位），元素仍然保持为定位前的形状，它原本所占的空间仍保留。从这一角度看，好像该元素仍然在文档流/标准流中一样。

注意：relative的參照点是它原来的位置，进行移动

3.absolute定位（绝对定位）

相当于元素从原来的位置脱离。并让出自己的空间，后面的元素就会占有让出的空间。

注意：absolute定位是相对于离自己近期的那个非标准流盒子而言的。

4.fixed定位

元素框的表现类似于将position设置为absolute，只是其包括块是视窗本身。

代码：

html文件（test5.html）:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>作者：一叶扁舟</title><!--

/*练习绝对定位和相对定位*/

    --><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="./test5.css">



  </head>  

  <body>

    <h1>练习html的定位，包含绝对定位和相对定位</h1>

    <div class = "class1">

   相对定位

    <div class = "style1">这是第一个方格</div>

    <div class = "style1" id = "style2">这是第二个方格</div>

    <div class = "style1">这第三个方格</div>

   <div class = "style1">这是第四个方格</div>

   </div>

   <div class ="class1">

   绝对定位

    <div class = "style1">这是第五个方格</div>

    <div class = "style1" id = "style3">这是第六个方格</div>

    <div class = "style1">这第七个方格</div>

   <div class = "style1">这是第八个方格</div>

   </div>

  </body>

</html>

CSS文件（test5.css）:

.style1 {

width:100px;

height:70px;

background-color:red;

margin-top:12px;

margin-left:3px;

float:left;

}



body {

width:800px;

height:500px;

border:2px solid blue;

background-color:green;



}









#style2 {

/*使用相对定位*/

position:relative;

left:110px;

top:90px;

}





div.class1 {

width:700px;

height:200px;

border:1px solid gray;

}



#style3 {

/*使用绝对定位*/

position:absolute;

left:400px;

top:300px;

}

执行的效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTY2MjMyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

随机推荐

  1. iOS 获取当前时间以及计算年龄（时间差）

    获取当前时间 NSDate *now = [NSDate date]; NSLog(@"now date is: %@", now); NSCalendar *calendar = ...

  2. fileziller 恢复 站点管理器 内的ftp帐号方法

    由于系统坏了重装了系统,以前的fileziller中配置的服务器链接信息列表很多,新装fileziller后即使复制以前的安装目录过来,站点管理器内还是空荡荡的. 这些服务器链接的配置信息非常重要,如 ...

  3. 基于visual Studio2013解决C语言竞赛题之1081shell排序

        题目 解决代码及点评 /************************************************************************/ /* ...

  4. 解决cocoapods在64位iOS7系统以下的警告问题

    今天碰到一个非常奇怪的问题.XCODE提示这种警告 Pods was rejected as an implicit dependency for 'libPods.a' because its ar ...

  5. Swift编程语言学习1.4——数值型字面量、数值类型转换

    数值型字面量 整数字面量能够被写作: 一个十进制数,没有前缀 一个二进制数,前缀是0b 一个八进制数,前缀是0o 一个十六进制数,前缀是0x 以下的全部整数字面量的十进制值都是17: let deci ...

  6. BZOJ 3110([Zjoi2013]K大数查询-区间第k大[段修改,在线]-树状数组套函数式线段树)

    3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec   Memory Limit: 512 MB Submit: 418   Solved: 235 [ Submit][ ...

  7. [每日一题] 11gOCP 1z0-052 :2013-08-30 差异的增量备份.....................................................A1

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/10669381 正确答案:AD 执行增量备份操作时,首先需要的是增量基本备份(increme ...

  8. BDIA增强

    SE24     CL_EXITHANDLER的方法GET_INSTANCE中有基本上所有的增强都会走这边,打上断点查找增强名称,或者在程序中全局搜索GET_INSTANCE关键字 然后 SE19 下 ...

  9. 591 - Box of Bricks

     Box of Bricks  Little Bob likes playing with his box of bricks. He puts the bricks one upon another ...

  10. 带有机器人框架的.NET自己主动化測试

    Clayton Neal在软件測试和质量保证方面有超过13年的经验,当中有八年的Windows, web,和移动应用程序的測试自己主动化经验.他在測试领域的全部等级都工作过.近期他在Bloomberg ...