Не удается наложить изображения друг на друга

Я пытался сделать свой собственный автоматический слайдер изображений, но по какой-то причине я не могу получить 3 изображения, которые я хочу показать по умолчанию в правильных позициях. Я хочу, чтобы одно основное изображение в середине div, а затем еще два , показанные справа (с меньшей шириной), отрезали с переполнением: скрыто. Я перепробовал все, что касается моих знаний CSS и HTML, и просто не могу заставить его выглядеть правильно. На рисунке ниже показано, что я пытаюсь выполнить с помощью HTML и CSS.

Изображение: Очень Художественное Изображение

HTML & CSS

2 ответа

  1. Это грязно, но я думаю, что это грубое представление о том, что вы ищете.

    #main {
        width: 0%;
        background-color: lightgreen;
        margin: 0;
        padding: 0;
        position: fixed;
    }
     
    #sliderImage {
        position: relative;
        top: 20%;
        right: 50%;
        left: 0;
        width: 40%;
        background: red;
        margin: 0;
    }
     
    #image1, #image2, #image3 {
        width: 400px;
        height: 200px;
        position: absolute;
        z-index: 1;
      border: 5px solid black;
    }
     
    #image2 {
        left:105px;
        z-index:-1;
        
    }
    
    #image3 {
        left:210px;
        z-index:-2;
    }
    <div id="main">
        <div id="sliderImage">
            <img src="http://lorempixel.com/600/300/sports" alt="image 1" id="image1"/>
            <img src="http://lorempixel.com/600/300/sports" alt="image 2" id="image2"/>
            <img src="http://lorempixel.com/600/300/sports" alt="image 3" id="image3"/>
        </div>
    </div>

  2. Сделали решение flexbox для этого:

    #image1 {-webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 8 1 auto;
    -ms-flex: 8 1 auto;
    flex: 8 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;}
    

    Это важная часть.

    Это другая соответствующая часть:

    #image2:hover{
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 98 1 auto;
    -ms-flex: 98 1 auto;
    flex: 98 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }
    

    Это довольно сложно объяснить, лучше всего проверить учебник по flexbox, это макет будущего в любом случае.

    Вот ссылка на перо.

    http://codepen.io/damianocel/pen/ZBbjOp