将div放在图像顶部

Question

I have tried all the solutions I have found on the new trying to get this div to sit on top of the image.

We have a background image, and as you can see from the image below are four words Eversoft, TruSoft, Solarmax and Active Family.

These four words need to be moved up into the boxes on the picture, but I can get the CSS right, this is how my page is constructed

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

And I'm currently using this CSS for the stainMasterLinksContainer

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

}

Any help would be appreciated.

Answer 1

It CAN be done. Here's one way:

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