由一位坛友的布局想到的定位问题：absolute和relative
坛友的问题和相关代码如下：
看看下面的代码。运行有问题。但是如果我把 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的更多相关文章
- 问题：关于一个坛友的html布局实现
来源:http://www.ido321.com/888.html 坛友的需求如图 这个跟上次贴友分类菜单的实现类似 html: 1: <body> 2: <div class=&q ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- ASP.NET网站优化（转自一位博友的文章，写的非常好）
不修改代码就能优化ASP.NET网站性能的一些方法 阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一 ...
- 问题：关于坛友的一个定时重复显示和隐藏div的实现
需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> htm ...
- 问题：关于坛友一个获取text内容并改变样式的实现
需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 1: <!DOCTYPE HTML> 3: <head> "content-t ...
- 问题：关于坛友的一个js轮播效果的实现
需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div 然后在原位置在隐藏一个div 给按钮添加click事件,转到下一个时 ...
- java 集合综述（总结于多位博友）
http://www.cnblogs.com/shunran/p/3459065.html(good) java集合类主要负责保存.盛装其他数据,因此集合类也称容器类. java集合类分为:set.l ...
- HTML中的布局方式：absolute、relative、fixed、static
在CSS中关于定位的内容是: position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z- ...
- css 布局absolute与relative的区别
absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relat ...
随机推荐
- Matlab中bsxfun和unique函数解析
一.问题来源 来自于一份LSH代码,记录下来. 二.函数解析 2.1 bsxfun bsxfun是一个matlab自版本R2007a来就提供的一个函数,作用是”applies an element-b ...
- Data transfer object
Data transfer object (DTO) is a design pattern used to transfer data between software application su ...
- console中应用MFC类的方法
1.添加#include <afx.h>或者<afxwin.h> 这时会报错1>c:\program files\microsoft visual studio 8\vc ...
- Maven Source jar
http://blog.csdn.net/symgdwyh/article/details/4407945
- POJ 1269 Intersecting Lines（几何）
题目链接 题意 : 给你两条线段的起点和终点,一共四个点,让你求交点坐标,如果这四个点是共线的,输出“LINE”,如果是平行的就输出“NONE”. 思路 : 照着ZN留下的模板果然好用,直接套上模板了 ...
- Android 显示大图片
主要的代码如下: BitmapFactory.Options options = new BitmapFactory.Options(); //图片解析配置 options.inJustDecodeB ...
- struts2 action中传递两个参数到url
<action name="outInDetail" class="formManage_outInDetailAction"> <resul ...
- Android：Resources资源文件
Android Resoureces是res目录下的那些目录和文件,常用的有: res/drawable/ 存放图片资源,类型有: 相关使用: Android:res之shape制作圆角 Androi ...
- POJ2115——C Looooops(扩展欧几里德+求解模线性方程)
C Looooops DescriptionA Compiler Mystery: We are given a C-language style for loop of type for (vari ...
- 转:Build Your First JavaScript Library
http://net.tutsplus.com/tutorials/javascript-ajax/build-your-first-javascript-library/ Step 1: Creat ...