Порядок карт

https://webref.ru/css/z-index

by mitiya

HTML

<div class="test">
   <img src="//webref.ru/example/image/3.png" alt="3" class="card three">
   <img src="//webref.ru/example/image/7.png" alt="7" class="card seven">
   <img src="//webref.ru/example/image/ace.png" alt="Туз" class="card ace">
   </div>

CSS

.test{
  
  border: solid 3px gold;
  display: inline-flex;
}
   .card {
     position: relative;
     border: solid 3px red;
   }
   .three { top: 50px; left: 55px; z-index: 5; }
   .seven { left: -120px; top: 25px; z-index: 2;}
   .ace { left: -290px; z-index: 1; }
   .card:hover { z-index: 10; }