GWT：使用 getAbsoluteTop/Left 将 DIV 定位在图像顶部 - FF 关闭几个像素？

发布于 2024-12-08 04:46:54 字数 655 浏览 0 评论 0原文

我正在编写一些 Google Web Toolkit 代码，将 AbsolutePanel 放置在图像顶部。我这样做的方法是：

等待图像加载（即宽度/高度> 0）
< p>使用image.getAbsoluteLeft()和image.getAbsoluteTop获取图像在视口中的绝对坐标
使用 RootPanel.get().setWidgetPosition(myPanel, imageAbsLeft, imageAbsTop) 将 AbsolutePanel（RootPanel 的直接子级）的位置设置为相同的坐标；

这适用于 Chrome 和 IE。但奇怪的是，Firefox 总是将 AbsolutePanel 放置在图像上方“几个”像素（我想说在 1 到大约 10 之间？但它因页面加载而异）。我不知道是什么原因造成的。任何提示非常感谢！

一个活生生的例子在这里：http://yuma-js.github.com。如果单击“添加注释”，则会出现一个可拖动的框，该框的移动受到 AbsolutePanel 的限制。您会注意到，该约束对于 Chrome 非常有效，但对于 FireFox 则无效。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昇り龍 2024-12-15 04:46:54

早上，

好吧，我做了一些研究如何也可以将图像与另一个对象叠加，并找到了这篇文章：如何将一个 div 覆盖在另一个 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>

Morning,

well, I did some research how I could overlay an image with a another object too, and found this article: How to overlay one div over another div.

Based on that I made a similar example using SVG and drawing example, where I draw a rectangle around a space station. What I can tell you is, that you don't want to mix pixel and percentage positioning, and if you can, you should use percentage positioning!

Hope this helps somehow.

Here is my example:

<!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>

回复收藏 0 原文

~没有更多了~