Div with background-image overlayed by another div with background-image - html

Question

I am trying to place 2 div elements containing background-image on the top of each other using the z-index property, but I'm struggling to make this work.
Ideally, I would like the div banner-image element to sort of slide underneath the div banner-image-overlay element as the screen is going smaller.
Here is my fiddle
HTML:
<div id="banner-container">
<div class="banner-image-overlay"></div>
<div class="banner-image"></div>
<div class="banner-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet
</p>
<button class="banner-button" onclick="location.href='http://www.example.com'">
Button
</button>
</div>
</div>
CSS:
#banner-container {
width: 100%;
position:relative;
}
.banner-image {
height: 375px;
background-image: url('http://via.placeholder.com/502x375');
background-repeat: no-repeat;
background-position: left top;
}
.banner-image-overlay {
height: 375px;
background-image: url('http://via.placeholder.com/399x375');
background-repeat: no-repeat;
background-position: right top;
z-index: 99;
}
.banner-text {
max-width: 240px;
font-family: 'Helvetica Neue Light', arial;
color: #fff;
font-size: 1.6em;
float: right;
position: absolute;
right: 35px;
top: 15px;
z-index: 199;
}
.banner-button {
max-width: 240px;
font-size: 0.9em;
background-color: #fff;
border: none;
border-radius: 4px;
font-family: 'Helvetica Neue Light', arial;
color: #000;
text-decoration: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
I just can't figure out how to position them on the top of each other.
I've already had this working with the regular img tag and then using the position: absolute property, but this doesn't seem to work with the background-image: url
Any ideas?

Answer 1

You need to have position: absolute for z-index work.
I have a better solution by using flex box:
.banner{position:relative; display:flex;width:375px;height:500px; background:left top url(https://picsum.photos/300/300) no-repeat}
.banner-bg{flex:1 1;background:right top url(https://picsum.photos/200/280) no-repeat}
.banner-title{font-size:30px}
<div class="banner">
<div class="banner-bg">
<div style="position:absolute;width:150px;right:10px;top:100px">
<div class="banner-title">HERE IS LONG TEXT...</div>
<button>GET IN TOUCH</button>
</div>
</div>
</div>
As you see right background is placed above left background.

Answer 2

div elements by default are positioned relatively which means they will be next to each other. z-index will not change their positioning. If you want to stack them you'll have to change their positions. Positioning one of them absolutely with left and top set to 0 will stack them.
add position:absolute to .banner-image-overlay.