Question

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

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

class User {
    String  loginId
static constraints = {
    loginId  nullable:true
  }

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

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

有谁知道如何实现这一目标？

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

Answer 1

你只需要将div位置设置为relative，并给它一个足够高的z-index，如下所示：

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

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

jquery循环允许叠加

1 个答案: