I have a fairly simple "promo banner" container, which is basically just an image with some overlayed text and and a button. I’m using https://www.w3schools.com/howto/howto_css_image_text.asp as a reference with the outer container (.promo-banner
) positioned relative, with all child elements positioned absolute.
This has worked fine until I introduced my button, which has pre-set styles from another component (position: relative) but I added a button-container
with absolute positioning to offset that, regardless I cannot achieve the button displaying how I expect (below the p
) without using hacky top/bottom properties with lots of px offset.
.promo-banner {
position: relative;
img {
position: absolute;
width: 1440px;
height: 671px;
}
.banner-content {
position: absolute;
padding-top: 222px;
padding-left: 56px;
}
h2 {
font-size: 44px;
margin-bottom: 24px;
color: white;
font-style: italic;
span {
font-size: 44px;
padding-top: 8px;
font-style: normal;
}
}
p {
position: absolute;
font-size: 16px;
color: white;
margin-bottom: 24px;
}
.button-container {
position: absolute;
}
.link-btn {
position: relative;
color: green;
background-color: transparent;
font-size: 16px;
border: 0;
padding: 0;
}
.link-btn span {
font-size: 16px;
padding-right: 12px;
padding-bottom: 4px;
}
.link-btn span::after {
position: absolute;
content: '';
border-bottom: 2px solid green;
width: 80%;
bottom: 0;
left: 0;
}
}
<div class="promo-banner">
<img src="../../assets/images/promo-banner.png" alt="Promo banner" />
<div class="banner-content">
<h2>
My content<span>that displays on an image</span>
</h2>
<p>
A magnificent piece of copy with a button below..
</p>
<div class="button-container">
<button type="button">
<span>Button link</span>
</button>
</div>
</div>
</div>
2
Answers
When you use
position: absolute;
for.banner-content
as a container you don’t need to applyposition: absolute;
to it’s children, which is cause the problem here, I comment out the unnecessary code here:To overlay your text on your image you only need to use position: absolute on your image. The others can be positioned statically within your
.promo-banner
div. Just remove theposition:absolute;
from them and the button will appear below the p elementMarked up code below: