在图像上显示 div答案

【问题标题】：Show div over image在图像上显示 div
【发布时间】：2012-11-26 17:01:28
【问题描述】：

我正在尝试制作一个小型商店地图，上面有一个指针，显示商店中的位置。我使用 jQuery 创建了它，它在 Chrome 中完美运行。然而，在 Firefox 和 Internet Explorer 中，指针位于地图后面，无法看到指针。我知道指针在那里，因为我可以使用 Firebug 看到它。

这是我使用的html代码：

<div id="container">
    <table>
        <tr>
            <td>Location in store</td>
        </tr>
        <tr>
            <td>
                <img src="../../maps/${department.getMap()}" id="map" />
                <div id="mapMarker" />
            </td>
        </tr>
    </table>
    <div class="spacing" />
</div>

CSS：

#map
{
    display: block;
    position: relative;
    z-index: 2;
}

#mapMarker
{
    width: 32px;
    height: 32px;
    position: absolute;
    display: block;

    z-index: 3;
    content: url("../images/MapMarker.png");
}

还有 jQuery 代码：

$(document).ready(function() {
    //Set the marker on the map.
    $("#mapMarker")
        .css({
            "left":     25,
            "top":      25
        })
        .show();
});

有没有人知道为什么我的指针（#mapMarker）被推到地图后面？谢谢。

【问题讨论】：

<td <JnJ:lang name="LocationInStore" /> /> 那是什么？
尝试使用完整的结束标签。
抱歉，这个网站是用jsp制作的，这是我们自己创建的标签。这些都不是问题。
你为什么要这样做content: url("../images/MapMarker.png");而不是<img src="images/MapMarker.png" id="mapMarker" />？

标签： jquery css image firefox z-index

【解决方案1】：

尝试使用 background 属性代替 content

#mapMaker {
    ...
    background: transparent url("../images/MapMarker.png") left top no-repeat;
    ...
}

在 Firefox http://jsfiddle.net/3xZuF/7/ 中运行良好（但尚未在 IE 中测试）

【讨论】：

【解决方案2】：

问题很可能是您使用的标记无效：

<div id="mapMarker" />

这不是有效的 HTML，你需要像这样关闭 div：

<div id="mapMarker"></div>

纠正这个，它应该可以工作。 Chrome 非常擅长解释无效标记，firefox 和 IE 则不那么好。还有一些其他错误，例如：

<td <JnJ:lang name="LocationInStore" /> />

和

<div class="spacing" />

【讨论】：

如果我像这样关闭 div 标签，则指针不会显示在任何浏览器中。
这并不意味着这个答案是错误的（因为它给了你正确的建议）。
@Jerodev，很公平，但这并不意味着您不应该使用有效的标记。试着把你有的东西放在一个 jsfiddle 中，我会看看