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