jquery cycle allow overlay

Question

I have created two snippets to show what I'm trying to do.

Here's the first one where the top left box holds a single image. The bottom right box has an image that overflows the box from right to left.

#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>

Here's the second snippet where the top left box holds two images that are cycled using the jquery cycle plugin. I can't seem to get the image that is in the lower right to appear in front of the slideshow.

Does anyone know how to make this happen?

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

You just need to set your div position to relative and give it a high enough z-index, like this:

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

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