How can i position those images over each other?

I tried to position my logo and headerpic on top of each other like this:

img {
    position: absolute;
    top: 25px;
    left: 25px;
}
.imgA1 {
    z-index: 1;
}
.imgB1 {
    z-index: 3;
}

    <img class="imgA1" src="https://placehold.it/200/333333">
    <img class="imgB1" src="https://placehold.it/100">

But my logo is still at the top end of my header pic.

My css code looks like this:

.header img.headerpic  { 
    max-width:100%; 
    float:left; 
    position:relative;
    background:transparent url(../images/header.jpg)
}
.header img.logo { 
    position: relative; 
    float:left; 
    max-width:100%;  
    background:transparent url(../images/logo.png )
}

and i added this in my index.php:

<body id="home">

<!-- header area -->

    <div class="header">
        <id="logo">
            <img src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" alt="logo"/>
            <img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" />
        <div class="infobox"><div class="inner">    
    </div>
</body>

What do i need to change that my Header-Picture is the background and my logo is on the left in the center of the Picture?

My actual view

Solution

position:absolute is relative to the nearest positioned parent, or the entire page. Therefore, here you are setting the images to be at the exact same location.

What you need is for .imgB1 to set position: relative and then move it to place with the top and others. E.g something like so:

#logo img {
   position:absolute;  
}

.header img.headerpic  { 
    max-width:100%; 
    top: 10px;
    left: 10px;
    position: relative !important;
}

    <div class="header" id="logo">
            <img src="https://placehold.it/200/333333" alt="logo"/>
            <img class="headerpic" src="https://placehold.it/100" alt="" />
        <div class="infobox"><div class="inner">    
    </div>