Как сделать слой поверх другого без смещения влево или право?

Question

[Константин]

Как наложить один слой на другой, но без смещения влево или право, так как блоки должны быть прижаты по краям контейнера.

Должно быть так:



На данный момент так:

Html

<div class="slider">
                <img class="text" src="img/slide1.png">
                <img class="photo" src="img/slide_1.jpg">
            </div>

Css

.text {
        position: relative
        z-index: 3  
        width: 480px
}

.photo {
        position: relative
        z-index: 1
}

И получается так:



Если я увеличиваю ширину картинки слева, то все равно она не накладывается поверх.

Comments

[FeST1VaL]

Ну а если их просто через absolute прижать к краям? ну и дать relative slider

т.е примерно так: на скорую руку накидал
https://jsfiddle.net/fest1val/dw1tqLnh/

[Константин]

Артем Будин, спасибо тебе, добрый человек! Пример очень наглядный!

Answer 1

[antanol]

Потому что они у вас в одном потоке.

.slider{
    position: relative;
}

.text{
  position: absolute;
}

Выровнять текст относительно блока можно с помощью top, right, left, bottom (задаются только два параметра, горизонтальный и вертикальный)