Filing stack of images in div - html

Question

I can't fill my images to the single div, stacked all over. It seems like they placed in one line
#keyframes fade {
0% {
opacity: 0;
}
11.11% {
opacity: 1;
}
33.33% {
opacity: 1;
}
44.44% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.fadein {
position: absolute;
height: 200px;
width: 400px;
display: inline-block;
background-size: contain;
overflow: hidden;
border: 4px solid #2e7645;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/** outline: 1px solid blue; **/
}
.fadein img {
max-width: 100%;
max-height: 100%;
z-index: -1;
position: relative;
left: 0;
right: 0;
opacity: 0;
animation-name: fade;
animation-duration: 9s;
animation-iteration-count: infinite;
}
.fadein img:nth-child(1) {
animation-delay: 0s;
}
.fadein img:nth-child(2) {
animation-delay: 3s;
}
.fadein img:nth-child(3) {
animation-delay: 6s;
}
<div class="fadein">
<img src="http://via.placeholder.com/350x150" style="width:100%">
<img src="http://lorempixel.com/output/animals-q-c-350-150-1.jpg" style="width:100%">
<img src="http://lorempixel.com/output/technics-q-c-350-150-2.jpg" style="width:100%">
</div>
Link to my fiddle

Answer 1

All you need to do is change the position of your img from relative to absolute:
.fadein img
{
...
z-index: -1;
position:absolute; // <-- this is the important change
left:0;
right:0;
...
}

Answer 2

If you also want to fill your container, add after position:absolute (as Niles Tanner mentioned) height and width value as 100%. (BTW you don't need z-index property)
.fadein img
{
max-width: 100%;
max-height:100%;
height:100%;
width:100%;
z-index: -1;
position:absolute;
...
And if your are sure that your pictures have the same dimensions, change your .fadein div's dimension to maintain proportion.
.fadein
{
position:absolute;
height:150px;
width:350px;
...