似乎无法让图像相互叠加

Question

我一直在尝试制作我自己的自动图像滑块，但出于某种原因，我似乎无法在正确的位置默认显示我想要的 3 张图像。我想要一个主图像在 div 的中间，然后在右侧显示另外两个（宽度较小），并用 overflow: hidden 截断。据我对 CSS 和 HTML 的了解，我已经尝试了所有方法，但就是无法让它看起来正确。下图显示了我试图使用 HTML 和 CSS.

完成的工作

图片：Very Artistic Image

HTML & CSS

Answer 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>

Answer 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的教程，反正是布局的未来。

这里是link来笔

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

似乎无法让图像相互叠加

Can't seem to be able to get images to overlay with each other

html

css

overlay

image

slider