How to place a fixed block on top of a slider?

Question

HTML

<div class="slider">
          <div class="slider-item" style="background-image: url(img/256.png)">
            <div class="slider-text">
              <div class="slider-title">sd</div>
              <div class="slider-description">dd</div>
              <a href="#" class="slider-link">a</a>
            </div>
          </div>
          <div class="slider-item" style="background-image: url(img/256.png)">
            <div class="slider-text">
              <div class="slider-title">sd</div>
              <div class="slider-description">dd</div>
              <a href="#" class="slider-link">a</a>
            </div>
          </div>
          <div class="slider-item" style="background-image: url(img/256.png)">
            <div class="slider-text">
              <div class="slider-title">sd</div>
              <div class="slider-description">dd</div>
              <a href="#" class="slider-link">a</a>
            </div>
          </div>
        </div>

I tried this, it turns out that the text is flipped along with the slider, can there be any alternative?

Answer 1

Separate block with absolute positioning.

<div class="block">
  <div class="slider"></div>
  <div class="text"></div>
</div>