坛友的问题和相关代码如下：

看看下面的代码。运行有问题。但是如果我把 style=”position:absolute; top:20px;left:10px改成 style=”float:left;”就正常了，我想不明白为什么？

   1: <div class="shayne">逆光国际逆光国际逆光国际</div>
   2: <script language="javascript">
   3: //创建一个showhidediv的方法，直接跟ID属性   
   4: function showhidediv(id){
   5: var age=document.getElementById("msg_2");
   6: var name=document.getElementById("msg_1");
   7: if (id == 'name') {
   8:    if (name.style.display=='none') {
   9:     age.style.display='none';
  10:     name.style.display='block';
  11:    }
  12: } else {
  13:    if (age.style.display=='none') {
  14:     name.style.display='none';
  15:     age.style.display='block';
  16:    }
  17: }
  18: }
  19: </script>
  20: <div id="show" style="float:left;" onMouseMove='showhidediv("name")';><img src="file:///F|/Dreamveaver/NIC/images/金闪闪.jpg" width="75" height="54" alt="1" />
  21:
  22: </div>
  23:
  24: <div id="show1" style="position:absolute; top:20px;left:10px;onMouseMove='showhidediv("age")';>Age：</div>
  25:
  26: <div id="msg_1" style="display:none;float:left;">林雨林</div>
  27: <div id="msg_2" style="display:none;float:left;">18</div>

我的第一反应就是LZ的问题出现在定位上，后来验证了我的想法。这里就不再赘述了。

看看w3school关于定位的一个概述：“对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。 ”

由此，我就想扒一扒position到底是个什么鸟样？

先写了一个正常情况下的文档：

   1: <!DOCTYPE HTML>
   2: <html>
   3:     <head>
   4:         <meta http-equiv="content-type" content="text/html;charset=utf-8">
   5:         <title>Location</title>
   6:     <style type="text/css">
   7:       .allDiv{
   8:         width: 200px;
   9:         height: 200px;
  10:       }
  11:       .div1{
  12:         border: 1px solid red;
  13:       }
  14:       .div2{
  15:         border: 1px solid blue;
  16:       }
  17:       .div3{
  18:         border: 2px solid black;
  19:         width: 100px;
  20:         height: 100px;
  21:       }
  22:     </style>
  23:     </head>
  24:     <body>
  25:       <h3>正常情况(没有采用定位,没有margin和padding)</h3>
  26:       <div class="div1 allDiv">
  27:         这是div1
  28:          <div class="div3">这是div3</div>
  29:       </div>
  30:       <div class="div2 allDiv">这是div2</div>
  31:     </body>
  32: </html>

效果:

然后修改div3，给div3进行绝对定位：

   1: //修改div3的css
   2: .div3{
   3:         border: 2px solid black;
   4:         width: 200px;
   5:         height: 200px;
   6:         position: absolute;
   7:         top: 200px;
   8:         left: 300px;
   9:       }
  10:
  11: //修改div3的内容
  12: <div class="div3">这是div3
  13: <p>因为div1没有绝对定位,所以div3的位置是相对于body,即最初的包含元素</p>
  14: </div>

效果：

div3的偏移距离是相对于body的左上角。然后我们给div2进行相对定位（元素任辉占据“原位置”）

   1: //修改div2的css
   2: .div2{
   3:         border: 1px solid blue;
   4:         position: relative;
   5:         top: 100px;
   6:         left: 200px;
   7:       }
   8: //修改一下div2的内容
   9: <div class="div2 allDiv">这是div2<p>div2相对定位，相对"原位置"偏移</p></div>

效果：

接下来呢，我们给div1和div3绝对定位，三个div的位置均会发生变化

   1: //修改div1的css
   2: .div1{
   3:         border: 1px solid red;
   4:         position: absolute;
   5:       }
   6:
   7: //修改div2和div3的内容
   8: <div class="div3">这是div3
   9: <p>因为div1绝对定位,所以div3的位置是相对于div1,即最近以定位的"祖先元素"</p>
  10: </div>
  11:
  12: <div class="div2 allDiv">这是div2
  13: <p>div2相对定位，因为最近有定位元素，所以相对以定位元素(div1)偏移</p>
  14: </div>

效果：

但是，当给div1进行相对定位时，div2的位置又奇妙的变化了

   1: .div1{
   2:         border: 1px solid red;
   3:         position: relative;
   4:       }
   5: //为了对比明显，给div2添加了color:red样式

效果：

也就是说，相对定位在附近没有绝对定位元素时，则相对于原位置进行“偏移”；反之，则根据最近已经定位（position:absolute）的元素进行“偏移”。

以上测试均在FF中进行。不足之处，敬请谅解。

来源：http://www.ido321.com/552.html

由一位坛友的布局想到的定位问题：absolute和relative的更多相关文章

  1. 问题：关于一个坛友的html布局实现

    来源:http://www.ido321.com/888.html 坛友的需求如图 这个跟上次贴友分类菜单的实现类似 html: 1: <body> 2: <div class=&q ...

  2. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  3. ASP.NET网站优化（转自一位博友的文章，写的非常好）

    不修改代码就能优化ASP.NET网站性能的一些方法 阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一 ...

  4. 问题：关于坛友的一个定时重复显示和隐藏div的实现

    需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> htm ...

  5. 问题：关于坛友一个获取text内容并改变样式的实现

    需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 1: <!DOCTYPE HTML> 3: <head> "content-t ...

  6. 问题：关于坛友的一个js轮播效果的实现

    需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件,转到下一个时 ...

  7. java 集合综述（总结于多位博友）

    http://www.cnblogs.com/shunran/p/3459065.html(good) java集合类主要负责保存.盛装其他数据,因此集合类也称容器类. java集合类分为:set.l ...

  8. HTML中的布局方式：absolute、relative、fixed、static

    在CSS中关于定位的内容是: position:relative | absolute | static | fixed     static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z- ...

  9. css 布局absolute与relative的区别

    absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relat ...

随机推荐

  1. Nginx 的启动、停止、平滑重启、信号控制和平滑升级

    Nginx 的启动         假设 nginx 安装在 /usr/local/nginx 目录中,那么启动 nginx 的命令就是: [root@localhost ~]# /usr/local ...

  2. awk 的一个奇怪异常

    awk: cmd. line:1: (FILENAME=- FNR=192) fatal: print to "standard output" failed (No space ...

  3. 开扒本地存储—localStorage

    .localStorage是什么狂点查看demo localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期 的. 2.localStorage有哪些优点 1). 存储空间 ...

  4. SQL手工注入

    site:xx.cn  inurl:asp?id= //找文章 xx.cn/pth/onews.asp?id=243' //试注入 xx.cn/pth/onews.asp?id=243 order b ...

  5. 一个只需要点 「下一步」就完成监控 Windows

    Cloud Insight 此前已然支持 Linux 操作系统,支持20多中数据库中间件等组件,多种操作,多种搭配,服务器监控玩的其乐无穷啊!但想想还有许多 Windows 的小伙伴没有体验过,所以在 ...

  6. xcode 开发ios兼容性问题的上下黑边 和 coco2d-x 游戏分辨率适配 ResolutionPolicy::FIXED_WIDTH 都会引起上下黑边问题！！！

    1:Xcode6在iPhone5+iOS7模拟器上编译,上下有黑边问题 问题描述: Xcode6环境下,对iPhone5或iPhone5s模拟器,在iOS7或iOS7.1下运行,屏幕上下有黑边.在iO ...

  7. [itint5]任务调度

    http://www.itint5.com/oj/#10 拓扑排序.首先按照题目给出的数据结构复杂度不会是O(v+e)的,所以先要变换数据结构.二来写的时候用一个stack会更好点.还有就是题目里其实 ...

  8. Servlet课程0424（一） 通过实现Servlet接口来开发Servlet

    //这是我的第一个Servlet,使用实现Servlet接口的方式来开发 package com.tsinghua; import javax.servlet.*; import java.io.*; ...

  9. Linux的终端与进程

    原文链接:http://os.51cto.com/art/201104/256477.htm Linux的普通进程(守护进程除外) 是终端的子进程,进程的存在要依赖终端为其提供空间包括标准输入.标准输 ...

  10. XMPP聊天客户端环境搭建

    1.服务器选择:ejabberd,具体安装过程请参考:http://blog.csdn.net/linhanmin/article/details/9876819 2.客户端配置: 采用xmppfra ...