How to overlay an image on top of a layer?

Question

css

You need to get something like this:

I, using bootsrap 4, did this:

<div class="container">
    <div class="row">
      <div class="col-5">
        <div class="row">
          <div class="col-9">91</div>
          <div class="col-3">31</div>
        </div>
      </div>
      <div class="col-2">
        <div class="fotorama" data-width="400" data-ratio="200/400" data-max-width="100%">
          <img src="img1/door.jpg" alt="Дверь" class="door" />
          <img src="img1/door.jpg" alt="Дверь" class="door" />
          <img src="img1/door.jpg" alt="Дверь" class="door" />
          <img src="img1/door.jpg" alt="Дверь" class="door" />
        </div>
      </div>
      <div class="col-5">
        <div class="row">
          <div class="col-3">32</div>
          <div class="col-9">92</div>
        </div>
      </div>
    </div>
  </div>

(fotorama is just a slider)

Answer 1

For the desired block, which should be on top of the rest, set the CSS property:

.block1 {
   z-index: 999;
}

And with this property, you can make various overlays of blocks, for example:

.block1 {
   z-index: 1;
}
.block2 {
   z-index: 2;
}
.block3 {
   z-index: 3;
}

Accordingly, block3 will be the top one, and block1 the bottom one, i.e. the higher the z-index value, the higher the block.