将div放置在图片上方

Question

我尝试了所有在网络上找到的解决方案来使这个div盒子覆盖在图片之上。

我们有一个背景图片，如下图所示，有四个单词Eversoft、TruSoft、Solarmax和Active Family。

这四个单词需要移动到图片上的盒子中，但我无法正确使用CSS，这是我的页面结构。

<div class="row">
   <img src="~/Content/Images/Mobile-BackGround-new-2.png" class="img-responsive" style="position: relative" />
   <div id="stainMasterLinksContainer">
    <div id="stainMasterLinksTop">
        <a href='@Url.Action("Eversoft", "Eversoft")' style="color: #934991;" class="GothamFont" id="Eversoft"><b>EverSoft</b> <small><sup>®</sup></small></a>
        <a href='@Url.Action("Trusoft", "Trusoft")' style="color: #f7acb7" class="GothamFont"><b>TruSoft</b> <small><sup>®</sup></small></a>
    </div>
    <div id="stainMasterLinksBottom">
        <a href='@Url.Action("Solarmax", "Solarmax")' style="color: #ffe600" class="GothamFont" id="Solarmax"><b>SolarMax</b> <small><sup>®</sup></small></a>
        <a href='@Url.Action("ActiveFamily", "ActiveFamily")' style="color: #dc1e33" class="GothamFont" id="ActiveFamily"><b>Active Family</b> <small><sup>™</sup></small></a>
    </div>
</div>

我目前正在使用这个CSS样式表来设置stainMasterLinksContainer

#stainMasterLinksContainer {
padding-top: -40%;
font-size: 15.5px;
position: relative;
z-index: 100;

}

非常感谢您的帮助。

- Code Ratchet

---

目前我能看出其中一个问题：padding不能为负数，请使用 margin 代替。 - Marcelo

为什么不把图片设置为背景图呢？ - jmore009

@jmore009 我尝试将 div 的背景设置为图片，但是我无法使用 img-responsive，这导致在手机上查看时图片无法自适应大小。同时，在手机上查看时还会出现白边框围绕着图片的问题。因此，我必须回到这种方法，以便能够使用 img-responsive。 - Code Ratchet

@jmore009 是的，昨天我花了绝大部分时间在网上尝试解决这个问题。我尝试了许多不同的解决方案，但都没有成功，所以我暂时又回到了这种方法。 - Code Ratchet

这不是特别响应式的设计，也不是完美的。但也许它可以给你一些想法？ http://jsfiddle.net/f5L2e60z/1/ - ggilberth

Answer 1

可以做到。以下是一种方法：

可以采取以下步骤：

<img src="http://practicalaction.org/images/sea-of-ducks-300.jpg" style="position:absolute; left:0px; top:0px"/>

<div style="background-color:blue;position:relative;left:80px; top:80px; width:50px;"> Hello</div>

- Steve Wellens

---

但是，假设图像被包含在父DIV中，那么这不会使得该DIV内部的定位出现偏差吗？ - dangel

为什么不试一下呢？（我试过了，答案是否定的）。无论如何，那不是原问题的一部分。 - Steve Wellens

我尝试过使用 https://jsfiddle.net/dwqd5aot/，但它会使父级 DIV 折叠，导致定位出现偏差。 - dangel