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

Question

我有一些问题,一个是z-index,另一个是浮点数:右; .

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

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

第二个问题是float: right;样式类notifyRight出现在错误位置的div .它打算出现在同一行notifyLeft,notifyCenter归类申报单,但它出现在下面的横线.

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

下面的源代码或者你可以http://jsfiddle.net/3cGRN/.

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例子

然后,要在同一行上获取通知图标,请将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例子