3 формат изображения - центр изображения больше и выше г-индекс

Question

Я пытаюсь добиться этого

Изображение 1 и 3 будет немного скрыта за изображение 2.

У меня есть этот HTML

Простая установка, единственная содержащая div с тремя подвалами, каждая из которых имеет изображение (идентичный собственный размер).

Текущий CSS

.imageBanner { 
     display: flex; 
     align-items: center; 
     width:100%; 
     max-width: 1024px;} 

    .imageLeft img{ 
    max-width: 60%; 
} 

.imageCentre { 
    z-index: 9999; 
    position: relative; 
} 

.imageCentre img{ 
    width: 100%; 
} 

.imageRight img{ 
    max-width: 60%; 
} 

Так что я сделал совмещены изображения вдоль оси х с помощью гибкого трубопровода. Затем я дал центральному изображению абсолютную позицию, чтобы учитывать z-индекс. Однако здесь я сталкиваюсь с проблемой, и изображения не выкладываются, как в приведенном выше примере.

Вот пример, если это помогает

.imageBanner { 
 
    display: flex; 
 
    align-items: center; 
 
    width:100%; 
 
    max-width: 1024px; 
 
} 
 

 
.imageLeft img{ 
 
    max-width: 60%; 
 
} 
 

 
.imageCentre { 
 
    z-index: 9999; 
 
    position: relative; 
 
} 
 

 
.imageCentre img{ 
 
    width: 100%; 
 
} 
 

 
.imageRight img{ 
 
    max-width: 60%; 
 
}

<div class="imageBanner"> 
 
       <div class="imageLeft"> 
 
        <img src="https://unsplash.it/600/400/"> 
 
       </div> 
 
       <div class="imageCentre"> 
 
        <img src="https://unsplash.it/600/400/"> 
 
       </div> 
 
       <div class="imageRight"> 
 
        <img src="https://unsplash.it/600/400/"> 
 
       </div> 
 
</div>

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

Благодаря Те

Answer 1

Вы думали о чем-то вроде этого:

.imageBanner { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width:100%; 
 
    max-width: 1024px; 
 
} 
 

 
.imageLeft { 
 
    width: 40%; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 30px; 
 
    z-index: -1; 
 
} 
 

 
.imageCentre { 
 
    width: 60%; 
 
    display: block; 
 
    position: relative; 
 
    z-index: 1; 
 
    margin: 0 auto; 
 
} 
 

 
.imageRight { 
 
    width: 40%; 
 
display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 30px; 
 
    z-index: -1; 
 
} 
 
img { 
 
    width: 100%; 
 
}

<div class="imageBanner"> 
 
      <div class="imageLeft"> 
 
       <img src="https://unsplash.it/600/400/"> 
 
      </div> 
 
      <div class="imageCentre"> 
 
       <img src="https://unsplash.it/600/400/"> 
 
      </div> 
 
      <div class="imageRight"> 
 
       <img src="https://unsplash.it/600/400/"> 
 
      </div> 
 
     </div>

левого отступа левого изображения в можно установить путем изменениями left: атрибута, и отступ справа изменений правого изображения в right:

Answer 2

 .imageBanner { 
     display: flex; 
     align-items: center; 
     width:100%; 
     max-width: 1024px;} 

img { 
    border: 5px solid red; 
    width: 100%; 
    height: auto; 
} 
.imageBanner { 
     display: flex; 
     align-items: center; 
     width:100%; 
     max-width: 1024px;} 

img { 
    border: 5px solid red; 
    width: 100%; 
    height: auto; 
} 

.imageCentre { 
    width: 100%; 
    z-index: 900; 
} 

.imageLeft { 
    position: relative; 
    left: 5%; 
} 

.imageRight { 
    position: relative; 
    right: 5%; 
} 
.imageCentre { 
    width: 100%; 
} 

, как показано на скрипку: https://jsfiddle.net/fce2n85s/1/

Answer 3

изменить ничего в коде просто добавить CSS в коде CSS. если это работает, ответьте мне!

.imageBanner img { 
    border:solid 5px #000 
} 
.imageLeft { 
    text-align:right; 
    margin-right:-5px 
}