не могу наложить картинки одна на другую

Question

в общем,делал я верстку макета и нужно сделать слайдер, но для начала надо нажить картинки одну на другую(они примерно одинакового размера)

.fade-slider {
   width: 100%;
   height: 100%;
   display: block;
}

.fade-slider__item--style-one {
    background: url(./img/lol.jpg) center center / contain no-repeat;
    height: 100%;
    left: 0;
    top: 0;
}

.fade-slider__item--style-two {
    background: url(./img/kek.jpg) center center / contain no-repeat;
    height: 100%;
    left: 0;
    top: 0;
}

<section>
<ul class="fade-slider">
                    <li class="fade-slider__item fade-slider__item--style-one">
                        <div class="fade-slider__text-one">
                            <h1 class="lined-text">
                                <div class="lined-text__word">very</div>
                                <div class="lined-text__word">mesmerizing,</div>
                                <div class="lined-text__word lined-text__word--color-yellow">unexplored</div>
                                <div class="lined-text__word lined-text__word--color-yellow">space</div>
                            </h1>
                        </div>
                    </li>
                    <li class="fade-slider__item fade-slider__item--style-two">
                      <div class="fade-slider__text-two">
                          <h1 class="lined-text">
                              <div class="lined-text__word">So beautiful</div>
                              <div class="lined-text__word lined-text__word--color-yellow">universe</div>
                          </h1>
                      </div>
                  </li>
                </ul>

Answer 1

необходимо задать свойство смещаемым блокам:

    position: absolute;

.fade-slider {
   width: 100%;
   height: 100%;
   display: block;
}

.fade-slider__item--style-one {
    position: absolute;
    background: url(./img/lol.jpg) center center / contain no-repeat;
    height: 100%;
    left: 0;
    top: 0;
}

.fade-slider__item--style-two {
    position: absolute;
    background: url(./img/kek.jpg) center center / contain no-repeat;
    height: 100%;
    left: 0;
    top: 0;

    color: red;
}

<section>
<ul class="fade-slider">
                    <li class="fade-slider__item fade-slider__item--style-one">
                        <div class="fade-slider__text-one">
                            <h1 class="lined-text">
                                <div class="lined-text__word">very</div>
                                <div class="lined-text__word">mesmerizing,</div>
                                <div class="lined-text__word lined-text__word--color-yellow">unexplored</div>
                                <div class="lined-text__word lined-text__word--color-yellow">space</div>
                            </h1>
                        </div>
                    </li>
                    <li class="fade-slider__item fade-slider__item--style-two">
                      <div class="fade-slider__text-two">
                          <h1 class="lined-text">
                              <div class="lined-text__word">So beautiful</div>
                              <div class="lined-text__word lined-text__word--color-yellow">universe</div>
                          </h1>
                      </div>
                  </li>
                </ul>

БЛОГ НА HUSL

не могу наложить картинки одна на другую

Ответы (1 шт):