堆叠图像元素在彼此之上没有位置绝对？

So I have a scenario where I want to stack images on top of each other for a slideshow. However, the context is a bit complex, so simply using position: absolute to stack them messes everything up. Not sure if I have any options here.

所以我有一个场景,我希望将图像叠加在一起以进行幻灯片放映。但是,上下文有点复杂,所以简单地使用position:absolute来叠加它们会让一切变得混乱。不知道我在这里有没有选择。

DEMO

<div class="article photo post">
    <div class="inner">
        <div class="overlay">
            <div class="title vertical">Title</div>
        </div>
        <div class="content slideshow">
            <img src="https://dl.dropboxusercontent.com/u/3618143/2-large.jpg" style="max-width: 40vw; display: inline;">
        </div>
    </div>
</div>

<div class="article photo post">
    <div class="inner">
        <div class="overlay">
            <div class="title vertical">Title</div>
        </div>
        <div class="content slideshow">
            <img src="https://dl.dropboxusercontent.com/u/3618143/1-large.jpg" style="max-width: 40vw; display: inline;">
            <img src="https://dl.dropboxusercontent.com/u/3618143/2-large.jpg" style="max-width: 40vw; display: inline;">
            <img src="https://dl.dropboxusercontent.com/u/3618143/3-large.jpg" style="max-width: 40vw; display: inline;">
            <img src="https://dl.dropboxusercontent.com/u/3618143/4-large.jpg" style="max-width: 40vw; display: inline;">
        </div>
    </div>
</div>

.article {
    position: relative;
    float: none;
    display: inline-block;
    vertical-align: bottom;
    padding: 10px;
}

.article .inner {
    position: relative;
    width: 100%;
    height: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.article .overlay {
    position: absolute;
    top: -1px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;

    z-index: 2;
    overflow: hidden;
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
    margin: 0 0 -25px;
}

.article .title {
    color: rgba(255,255,255,0);
    -webkit-transition: color .2s ease-out 0s;
    -moz-transition: color .2s ease-out 0s;
    -o-transition: color .2s ease-out 0s;
    transition: color .2s ease-out 0s;
    -webkit-transform: translateZ(0);
}

.article:hover .overlay {
   pointer-events: auto;
   background-color: rgba(0, 0, 0, 0.7);
   -webkit-transition: background-color .3s ease-out .75s; 
   -moz-transition: background-color .3s ease-out .75s;
   -o-transition: background-color .3s ease-out .75s;  
   transition: background-color .3s ease-out .75s;
}

.article:hover .title {
  color: rgba(255, 255, 255, 1);

  -webkit-transition: color .5s ease-out .75s; 
  -moz-transition: color .5s ease-out .75s;
  -o-transition: color .5s ease-out .75s;  
  transition: color .5s ease-out .75s;
}

.vertical {
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.content {
    position: relative;
}

.content img {
    max-height: 70vh;
}

1 个解决方案

#1

I think if you give to the div with class of .content a width of let's say 200px(or the width of the images), would work because the images won't have enaught space to go to right so they will go underneath the one above.

我想如果你用.content类赋予div一个宽度,比方说200px(或图像的宽度),就可以工作,因为图像不会有空间向右转,所以它们会在下面以上。

Example here.