如何在HTML元素中绘制一个框？

Question

我有一个大致如下的HTML应用程序：

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
    </div>
    <span>Version 1.0</span>
</div>

大致看起来像这样：

服务器端处理为我提供中的坐标我想要突出显示的图像（例如，通过在图像顶部绘制一个红色框）。我希望做的是：

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"/>
    </div>
    <span>Version 1.0</span>
</div>

（服务器在HTML源代码中生成坐标）大致如下所示：

使用：

#highlight: {
   position: absolute;
   border: 2px solid red;
}
#element: {
   position: relative;
}

但相反，我得到了：

最后一个跨度位于刚刚关闭的元素内。我错过了什么？

更新

我编辑了这个问题以摆脱一个错字，但留在实际导致问题的错误中。

Answer 1

很多错误！

错误1：

<div id="highlight" style="width:30px;height:10px;top:10px;left:10px!!!!!/>

缺少结束语：

<div id="highlight" style="width:30px;height:10px;top:10px;left:10px"/>

错误2：

div无法自行关闭：

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"!!!!/>
    </div>
    <span>Version 1.0</span>
</div>

修正：

<div id="container">
    <span>Header</span>
    <div id="element">
        <img src="something"/>
        <div id="highlight" style="width:30px;height:10px;top:10px;left:10px"></div>
    </div>
    <span>Version 1.0</span>
</div>