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

jquery 循环允许叠加

jquery cycle allow overlay

javascript

jquery

jquery-cycle