我有三个重叠的div(顶部、中间、底部)。在中间的div中,我使用了从jfriend00的这个fiddle改编来的Javascript实现图片交替淡入淡出。
中间的div的位置设置为relative,其中的图片都被设置为absolute。然而,中间div与底部div重叠了。
我大多数时候读到说,要包含绝对定位的元素,必须使用相对容器,我已经使用了相对容器,但我不明白为什么我的中间div不能很好地在顶部和底部div之间流动和堆叠?
如果我向容器添加静态高度583px和宽度940px,它会正确地流动,但无法响应。理想情况下,它需要与百分比宽度一起工作。
以下是我尝试过的内容:
这里有一个演示问题的fiddle。
非常感谢您的帮助。
中间的div的位置设置为relative,其中的图片都被设置为absolute。然而,中间div与底部div重叠了。
我大多数时候读到说,要包含绝对定位的元素,必须使用相对容器,我已经使用了相对容器,但我不明白为什么我的中间div不能很好地在顶部和底部div之间流动和堆叠?
如果我向容器添加静态高度583px和宽度940px,它会正确地流动,但无法响应。理想情况下,它需要与百分比宽度一起工作。
以下是我尝试过的内容:
.container {position: relative; font-size: 0; width: 100%;}
/*.container {position: relative; font-size: 0; height: 940px; width: 583px;} this stops the box responding, which isn't what I want */
.slide {
border: none;
opacity: 0;
position: absolute;
width: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.showMe {opacity: 1;}
.top {display: block;}
.bottom {display: block;}
<div class="top">
This is some test content. Top.
</div>
<div class="container">
<img id="slideimg0" class="slide showMe" src="https://dummyimage.com/940x583/red/fff.jpg">
<img id="slideimg1" class="slide" src="https://dummyimage.com/940x583/000000/fff.jpg">
<img id="slideimg2" class="slide" src="https://dummyimage.com/940x583/6b6b24/fff.jpg">
<img id="slideimg3" class="slide" src="https://dummyimage.com/940x583/fefe03/fff.jpg">
<img id="slideimg4" class="slide" src="https://dummyimage.com/940x583/094fae/fff.jpg">
<img id="slideimg5" class="slide" src="https://dummyimage.com/940x583/fa132e/fff.jpg">
<img id="slideimg6" class="slide" src="https://dummyimage.com/940x583/a90cba/fff.jpg">
</div>
<div class="bottom">
This is some test content. Bottom.
</div>
这里有一个演示问题的fiddle。
非常感谢您的帮助。