javascript - jquery循环允许覆盖

Question

我创建了两个片段来展示我正在尝试做的事情。

这是第一个，左上角的框包含单个图像。右下框有一个从右到左溢出框的图像。

#one{
    height: 200px;
    background-color: red;
    float: left;
}
#two{
    height: 100px;
    background-color: pink;
}
#three{
    height: 100px;
    background-color: blue;
    overflow: visible;
    direction: rtl;
}

.row{
    display: inline-block;
    width: 200px;   
    margin: 0px;
    padding: 0px;
}
#wrapper{
max-width: 500px;
}

    <div id="wrapper">
    <div class="row" id="one">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Emoji_u1f533.svg" height="200px" width="200px">
    </div>
    <div class="row" id="two">&nbsp;</div>
    <div class="row" id="three">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Toolbaricon_rule.png" width="400px" height="100px">
    </div>
</div>

这是第二个片段，其中左上角的框包含两个使用 jquery 循环插件循环的图像。我似乎无法让右下角的图像出现在幻灯片前面。

有谁知道如何实现这一点吗？

jQuery(document).ready(function () {
    jQuery('#one').cycle({
        containerResize: 0,
        fx: 'fade',
        timeout: 1500,
    });
});

#one {
    height: 200px;
    background-color: red;
    float: left;
}
#two {
    height: 100px;
    background-color: pink;
}
#three {
    height: 100px;
    background-color: blue;
    overflow: visible;
    direction: rtl;
}
#wrapper{
    max-width: 500px;
}
.row {
    display: inline-block;
    width: 200px;
    margin: 0px;
    padding: 0px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
<div id="wrapper">
    <div class="row" id="one">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Emoji_u1f533.svg" height="200px" width="200px">
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Emoji_u1f532.svg" height="200px" width="200px">
    </div>
    <div class="row" id="two">&nbsp;</div>
    <div class="row" id="three">
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Toolbaricon_rule.png" width="400px" height="100px">
    </div>
</div>

Answer 1

您只需将 div 位置设置为相对位置并为其指定足够高的 z-index，如下所示:

#three {
    position: relative;
    z-index: 10;

    height: 100px;
    background-color: blue;
    overflow: visible;
    direction: rtl;
}