|
锁定老帖子 主题：css绝对定位相对定位，一些迷惑
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2007-11-15
html页面代码，里面的js就不说了，是画图用的。目的很简单就是以html页面中的“search.png”这个小图标为圆心，100px为半径画圆。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>test </TITLE>
<SCRIPT type="text/javascript" LANGUAGE="JavaScript" src="js/wz_jsgraphics.js">
</SCRIPT>
<script type="text/javascript">
<!--
function draw(){
var cnv = document.getElementById("maps");
var jg = new jsGraphics(cnv);jg.setStroke(4);
jg.setColor("#ff0000"); // red
jg.drawEllipse(160, 160, 100, 100);
jg.paint();
}
//-->
</script>
</HEAD>
<BODY>
<div id="maps">
<input value="drawCircle" onclick="draw();" type="button">
<div style="left:200px; top:200px;position: absolute;" >
<div style="background-color:red; width:20px; height:20px; z-index:10000; position: relative;">
<IMG SRC="search.png" WIDTH="16" HEIGHT="16">
</div>
<div style="background-color:orange; left:-40px; top:-40px; width:100px; height:100px; position: absolute;">
</div>
</div>
</div>
</BODY>
</HTML>
代码只是上面这样，当点击drawCircle button的时候，是可以以 search.png 这个图片为圆心，100px为半径画出圆来的。 但 当 代码改为下面这样
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>test </TITLE>
<SCRIPT type="text/javascript" LANGUAGE="JavaScript" src="js/wz_jsgraphics.js">
</SCRIPT>
<script type="text/javascript">
<!--
function draw(){
var cnv = document.getElementById("maps");
var jg = new jsGraphics(cnv);jg.setStroke(4);
jg.setColor("#ff0000"); // red
jg.drawEllipse(160, 160, 100, 100);
jg.paint();
}
//-->
</script>
</HEAD>
<BODY>
<div id="maps">
<div id="test" style="background-color:yellow; left:0px; top:0px; width:100px; height:100px; position: relative;">
<input value="drawCircle" onclick="draw();" type="button">
<div style="left:200px; top:200px;position: absolute;" >
<div style="background-color:red; width:20px; height:20px; z-index:10000; position: relative;">
<IMG SRC="search.png" WIDTH="16" HEIGHT="16">
</div>
<div style="background-color:orange; left:-40px; top:-40px; width:100px; height:100px; position: absolute;">
</div>
</div>
</div>
</div>
</BODY>
</HTML>
就是在第一层div下面再括上一层 【<div id="test" style="background-color:yellow; left:0px; top:0px; width:100px; height:100px; position: relative;">】 按照css中relative的解释，这个id为test的div，应该只是处于它在文本流中的位置,而没有任何偏移，那么，我要取的圆心，因为是取的绝对定位的坐标，所以也不应该有任何改变，可是现在在ff，ie中运行，都会发现这时候画出的圆的圆心在小图标的上方。现在的问题是，偏出的位移是从哪来的？ 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2007-11-15
请给body加上margin 0px,是body的margin影响了relative定位的div位置,间接影响内部绝对定位元素,或者把relative修改为absolute也可以
|
| 返回顶楼 | |
|
发表时间：2007-11-15
不是这样的。
|
| 返回顶楼 | |
|
发表时间：2007-11-15
relative会继承body默认的margin,会影响定位,如果还有其他原因,由于不了解wz_jsgraphics.js,无法帮助解释其原因,可以自己调试下,看看运行结果为何如此
|
| 返回顶楼 | |
|
发表时间：2007-11-16
原本你的absolute是相对于body的，现在你的absolute是相对于#test的。
|
| 返回顶楼 | |
|
发表时间：2007-11-16
hax 说得对,他是相对最近的"块"而言的
|
| 返回顶楼 | |
|
发表时间：2007-11-16
hax 写道 原本你的absolute是相对于body的，现在你的absolute是相对于#test的。
可是现在#test并没有任何位移啊，“left:0px; top:0px;”。 我取得圆心是绝对位置，是不会受所谓的文本流影响的啊。 有没有什么办法得到加了#test这个div之后的圆心呢？ |
| 返回顶楼 | |
|
发表时间：2007-11-17
可以上传全部代码,可以看看
|
| 返回顶楼 | |
|
发表时间：2007-11-18
afcn0 写道 可以上传全部代码,可以看看
附件是文中提到的那个wz_jsgraphics.js： 排除ie的bug，这个肯定不是，因为ff的现象和ie的一样。 这个问题应该有人碰到过啊， ？？ |
| 返回顶楼 | |
|
发表时间：2007-11-18
给你测试了,就是body默认的8px的margin造成的影响,加入
<style>body {margin:0px}</style>或者把test定为absolute都可以
|
| 返回顶楼 | |
