Question

我遇到了一些问题，一个是 z-index ，另一个是 float：right; 。

我希望有一个图标来显示用户可以点击以消除通知的十字，这显示在页面底部显示的通知的右上角。

我注意到z-index对样式类dismiss的div没有任何影响，无论我改变要使用的各种div。鼠标光标在悬停时不会更改，单击图标时不会调用单击侦听器。

第二个问题是float: right; div，样式类notifyRight出现在错误的位置。意图与notifyLeft，notifyCenter分类的div显示在同一行，但它出现在下面一行。

我正在尝试以另一种方式做得更好，因为我无法解决如何解决这两个问题。

Example of output from the code.

HTML：

<div style="height: 100%; width: 100%;">
    <div style="position: absolute; bottom: 0px; width: 100%;">
        <div id="notificationContainer" class="anchor-for-absolute-positioning">
            <div id="dismiss" class="dismiss">
                <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Actions-application-exit-icon.png" title="Dismiss notification message." />
            </div>
            <div id="first" class="use-anchor">
                <div class="notifyLeft">
                    <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Button-Info-icon.png" style=" display: block;">
                </div>
                <div class="notifyCenter">
                    <img src="http://icons.iconarchive.com/icons/fasticon/cat/128/Cat-Black-White-icon.png" />
                </div>
                <div class="notifyRight">
                    <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Button-Info-icon.png" style=" display: block;">
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
.anchor-for-absolute-positioning {
    position: relative;
    background-color: rgb(176, 226, 255);
    width: 100%;
    height: 128px;
}
.use-anchor {
    position: absolute;
    width: 100%;
}
.dismiss {
    margin-top:1px;
    margin-right:1px;
    display: inline-block;
    float: right;
    z-index: 9999;
    cursor: hand;
    cursor: pointer;
}
img {
    display: block;
}
.notifyLeft {
    position:relative;
    float:left;
    width:50px;
    background-color:#CC6600;
    margin-top: 40px;
}
.notifyCenter {
    position:relative;
    margin:0 50px 0 50px;
    background-color:#FFCC00;
}
.notifyRight {
    position:relative;
    float:right;
    width:50px;
    background-color:#FF6633;
    margin-top: 40px;
}

JS：

$(document).ready(function () {
    $('#dismiss').click(function() { alert('click'); });
});

Answer 1

z-index仅适用于定位元素（即静态值以外的值，这是默认值）。将position:relative添加到.dismiss课程，然后点击元素：

.dismiss {
    margin-top:1px;
    margin-right:1px;
    display: inline-block;
    float: right;
    position:relative;
    z-index: 9999;
    cursor: hand;
    cursor: pointer;
}

<强> jsFiddle example

然后，要将您的通知图标放在同一行，请将HTML重新排序为：

<div class="notifyLeft">
    <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Button-Info-icon.png" style=" display: block;">
</div>
<div class="notifyRight">
    <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Button-Info-icon.png" style=" display: block;">
</div>
<div class="notifyCenter">
    <img src="http://icons.iconarchive.com/icons/fasticon/cat/128/Cat-Black-White-icon.png" />
</div>

<强> jsFiddle example

z-index和float：右边不能很好地一起玩

1 个答案: