将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;

}

任何帮助，将不胜感激。

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>