<h1>重叠图像

Question

I'm trying to figure out how to place h1 on top of a picture. I've tried multiple ways found here at stackoverflow but I still can't get my head around it.

HTML:

<div class="container">
    <div class="mainImg">
        <h1> Title </h1>
        <img src="img" alt="picture" />
    </div>
</div>

CSS:

    .mainImg {
    position: relative;
    left: 0;
    top: 0;
    background: green;
}

.mainImg h1 {
    z-index: 2;
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    font-size: 20px;
    width: 100%;
    height: 26px;
    padding: 0;
    margin: 0;
    text-align: center;
    background: red;
}

.mainImg img {
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:green
}

Answer 1

If your container (mainIMG) has no other content than those absolutely positioned elements, you have to set a width and height for it. Both child elements are outside of the content flow of the container by positioning them absolutely. The image just has percentage width and height values, plus position values dependent on its container, so without width and height for the container it takes up no space:

 .mainImg { position: relative; left: 0; top: 0; background: green; width: 300px; height: 200px; } .mainImg h1 { z-index: 2; position: absolute; top: 30%; left: 0; right: 0; font-size: 20px; width: 100%; height: 26px; padding: 0; margin: 0; text-align: center; background: red; } .mainImg img { z-index: 0; width: 100%; height: 100%; position: absolute; top:0; right:0; bottom:0; left:0; background:green } 

 <div class="container"> <div class="mainImg"> <h1> Title </h1> <img src="http://placehold.it/400x300/0fb" alt="picture" /> </div> </div> 

Answer 2

 <style type="text/css"> .mainImg { position: relative; left: 0; top: 0; background: green; } .mainImg h1 { z-index: 2; position: absolute; top: 30%; left: 0; right: 0; font-size: 20px; width: 100%; height: 26px; padding: 0; margin: 0; text-align: center; background: red; } .mainImg img { z-index: 0; width: 100%; height: 100%; top:0; right:0; bottom:0; left:0; background:green } </style> 

 <div class="container"> <div class="mainImg"> <h1> Title </h1> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="picture" /> </div> </div>