I am facing an issue with placing text over an image on my website. No matter what I try, the text always ends up below the image and I can't seem to bring it up.
Here is a snippet of my code:
.Happylady {
position: relative;
width: 100%;
}
.Happylady p {
float: left;
position: absolute;
left: 0;
top: 80px;
width: 100%;
}
<div class="Bannerimage">
<img src="content/severroom.png" class="centerimage" />
<p>Check out speeds up to 60Mbps!</p>
<a href="/cable/"><button >View Packages!</button></a>
</div>
<div class="Internet">
<div class="Information">
<h3>INTERNET</h3>
<h7>CABLE, DSL & RURAL WIRELESS</h7>
</div
<div class="HappyLady">
<img src="content/happylaptoplady.png" alt="" />
<div class="contents">
<h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
<div class="Benefits">
<p>UNLIMITED PLANS AVAILABLE</p>
<p>NOW WITH LOWER PRICES</p>
<p>FASTER SPEEDS - UP TO 60 MBPS!</p>
</div>
</div>
</div>
</div>
<div class="Phone">
<h3>PHONE</h3>
<h7>RESIDENTIAL & COMMERCIAL</h7>
</div>
<div class="Television">
<h3>TELEVISION</h3>
<h7>SHAW DIRECT / INTERNET TV</h7>
</div>
Edit: Provided above is the complete HTML code which might help in identifying where the problem lies.