CODEWITHSUNDEEP
htmlcssz-index
Olly F
Olly F

Reputation: 2869

Text on top of image works without Z-index, why?

I want to display a subtitle text, running over the top of an image, aligned to the bottom (of the DIV containing the image).

I was expecting I'd need to use Z-Index but for some reason it works without. I'd really like to understand why.

Here's the HTML:

<div class="latest-item">
            <img src="images/latest-image-placeholder.png" alt="latest-image-placeholder"/>
            <div class="latest-item-copy">Bad schools, flawed justice create crime. Test Bad schools, flawed justice create crime. Test </div>
        </div>

And here's the corresponding CSS:

.latest-item    {
            height: 130px;
            background-color: fuchsia;
            margin-bottom: 20px;
            overflow: hidden;
            position: relative;
            }

.latest-item-copy   {
                width: 220px;
                /* Fallback for web browsers that doesn't support RGBa */
                background: rgb(0, 0, 0);
                /*  RGBa with 0.6 opacity */
                background: rgba(0, 0, 0, 0.6);
                bottom: 0px;
                position: absolute;
                padding-left: 5px;
                padding-right: 15px;
                padding-top: 2px;
                padding-bottom: 4px;
                box-sizing:border-box;
                -moz-box-sizing:border-box; /* Firefox */
                -webkit-box-sizing:border-box; /* Safari */
                font-family: Georgia, Times New Roman, serif;
                font-size: 14px;
                line-height: 18px;
                color: #F1F1F1;
                font-weight: bold;
                }

And here's what it outputs: https://i.sstatic.net/Hdl9l.png

Upvotes: 1

Views: 1384

Answers (2)

elclanrs
elclanrs

Reputation: 94111

Because you're using position: absolute

Upvotes: 1

Alex Morales
Alex Morales

Reputation: 1191

When you position an item absolutely, it pulls the element out of the document flow. It's the same thing that happens when you float an element. They automatically get placed in a different "layer" that has a higher z-index.

Upvotes: 4

Related Questions