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