Div重叠不正确

Question

我遇到问题，在页面的其余部分进行一次div重叠。

我只需要一个图像来重叠一个部分。我有点工作但是一旦你调整窗口大小或以不同的分辨率看它，图像就不会出现在它应该的位置。

我正在使用position:absolute;和z-index。它在某种程度上起作用。但它不会停留在那个位置，例如，如果你调整浏览器窗口的大小（它会从我想要的位置移动）。

这是this website

我需要它与yellow box like this重叠。

编辑：快速跟进：我认为您的解决方案让我有点麻烦。我无法在其下as can be seen here

直接放置另一个div

Answer 1

移动

<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div>

内

<div id="box"><img src="images/boxheading.png"></div>

就在图像之前。

将CSS更改为

#medal {
    position: relative;
    top: -240px;
    right: -80px;
    z-index: 50;
}

并将以下内容应用于boxheading.png图片

{
    position: relative;
    top: -280px;
}

修改

从我认为你想要实现的目标来看，你应该看一个2列的布局。网上有太多的良好实践资源来学习如何去做。

要在第一个框下方添加另一个框，您需要对html进行以下更改：

<div id="box-container">
    <div id="box">
        <div id="medal">
            <img src="images/star2012medal.png" width="220" height="277">
        </div>
        <img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; ">
    </div>
    <div id="box2">testing</div>
</div>

然后添加以下css：

#box-container {
    float: right;
}

#box {
    float: left;
    color: #333;
    background: #fff;
    height: 240px;
    width: 291px;
    display: inline;
    border-style: solid;
    border-color: #fff100;
    -moz-border-radius: 10px;
    border-radius: 10px;
    clear: both;
}

#box2 {
    float: left;
    color: #333;
    background: #fff;
    height: 240px;
    width: 291px;
    display: inline-block;
    border-style: solid;
    border-color: #fff100;
    -moz-border-radius: 10px;
    border-radius: 10px;
    clear: both;
    margin-top: 10px;
}

仅在Chrome中测试过。请记得在其他浏览器中测试它！