Question

我正在研究一些将AbsolutePanel放在图像顶部的Google Web Toolkit代码。我这样做的方式是：

等到图像加载（即宽度/高度> 0）
使用image.getAbsoluteLeft（）和image.getAbsoluteTop
使用RootPanel.get（）将AbsolutePanel（RootPanel的直接子节点）的位置设置为相同的坐标.setWidgetPosition（myPanel，imageAbsLeft，imageAbsTop）;

适用于Chrome和IE。但奇怪的是，Firefox总是将AbsolutePanel定位在图像上方的“几个”像素（我说在1到大约10之间？但它从页面加载到页面加载不等）。我对这是什么原因一无所知。任何提示都非常赞赏！

这方面的一个实例是：http://yuma-js.github.com。如果单击“添加注释”，则会出现一个可拖动的框，该移动受AbsolutePanel约束。您会注意到约束适用于Chrome，但对于FireFox则不适用。

Answer 1

上午，

好吧，我做了一些研究，我也可以用另一个对象覆盖图像，并找到了这篇文章：How to overlay one div over another div。

基于此我使用SVG和绘图示例做了一个类似的例子，我在空间站周围绘制一个矩形。我可以告诉你的是，你不想混合像素和百分比定位，如果可以，你应该使用百分比定位！

希望这会有所帮助。

以下是我的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>SVG Example</title>
  <style>
  html, body {
    margin: 0px;
    padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #navi, 
    #infoi {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #infoi {
        z-index: 10;
    }

    #navi img {     

    }
  </style>
</head>
<body>
<div id="container">
    <div class="navi"><img src="http://www.bing.com/fd/hpk2/SpaceStation_ROW1605701719.jpg" width="100%" height="100%"/></div>
    <div id="infoi"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <rect x="65%" y="40%" width="20%" height="30%"
        fill="none" stroke="red" stroke-width="2"/>
        </svg> 
    </div>
</div>
<p>This example draws a fullscreen image and places a fullscreen svg element above it. The svg element then draws a rectangle based on percentage sizes, 

which is around the space Station. If the browser window resizes, the size of the drawn rectanlge changes as well, to always be on top of the space 

station.</p>
<p>Resources for this example where the following links:</p>
<ul>
    <li><a href="https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div" >How to overlay one div over another div</a>
    <li><a href="http://de.wikipedia.org/wiki/Svg" >Wikipedia: Scalable Vector Graphics</a>
    <li><a href="http://www.w3.org/TR/SVG/shapes.html" >W3C Recommendation: 9 Basic Shapes</a>
</ul> 
<p>Image from: <a href="http://www.bing.com/">Bing.com</a>, © StockTrek/White/Photolibrary</p> 
</html>

GET：使用获取绝对上/左 - FF几个像素将DIV置于图像顶部？

1 个答案: