Question

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

<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;
}

Answer 1

我认为如果你给.content等级的div给出宽度为200px（或者图像的宽度），那将会起作用，因为这些图像不会被吸引空间向右走，所以它们会在上面的那个下方。

示例here。

堆叠图像元素在没有绝对位置的情况下相互叠加？

1 个答案: