Текст поверх изображения работает без Z-индекса, почему?

Question

Я хочу отобразить текст субтитров, проходящий поверх изображения, выровненный по низу (DIV, содержащего изображение).

Я ожидал, что мне нужно будет использовать Z-Index, но по какой-то причине он работает без. Мне бы очень хотелось понять, почему.

Вот 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>

А вот соответствующий 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;
                }

И вот что он выводит: http://i.stack.imgur.com/Hdl9l.png

Answer 1

Когда вы позиционируете элемент абсолютно, он вытягивает элемент из потока документов. То же самое происходит, когда вы плаваете элемент. Они автоматически помещаются в другой «слой» с более высоким z-индексом.

Answer 2

Потому что вы используете position: absolute