如何：以创造性的方式定位图像和DIV

Question

建立一个最终将成为Facebook游戏的网站（希望！），我有点卡住了。我提供了一个更好解释的图像。

我创建了一个DIV，背景是图像（减去我非常专业的潦草）并且在DIV上定位将是其他Image和DIV的。虽然我理解HTML，但图像并没有到达应该去的地方，它们完全不合适，最终到处都是！我稍后会提供一些代码，首先我将解释我在我的专业编辑图像上的数字。

1. currenthero div。 （或者里面带有图像的DIV，试过两个）
2. 图像2。它将出现在border / X按钮下。
3. missionpopupexit div。不可见，坐在X按钮上并调用JavaScript函数。
4. 图像4。
5. 任意任务的文字！

HTML：

<div id='missionpopup'>
  <div id='currenthero'>
    <img src='images/TallSlimTest.png' />
  </div>
  <div id='missionpopupexit' />
</div>

CSS：

#missionpopup {
text-align: left;
width: 752px;
height: 500px;
position: relative;
background-image:url('./images/missionpopup.png');
}

#missionpopupexit {
margin-left: 720px;
width: 30px;
height: 30px;
position: absolute;
border-style: solid;
border-width: 1px;
}

#currenthero {
margin-left: 33px;
margin-top: 16px;
margin-bottom: 14px;
float: left;
}

我希望能够让id="missionpopupexit"坐在右上方的X上，而不会影响DIV中其他所有内容的定位或位置！我使用浮动和显示的不同变化：内联;，事情就是这样，但是一切似乎都变得混乱了！

Answer 1

首先，你必须正确关闭div。

其次，在使用绝对位置时不要使用保证金， 试试这个：

#missionpopupexit {
width: 30px;
height: 30px;
position: absolute;
border-style: solid;
border-width: 1px;
}