我遇到了几个问题，一个是z-index，另一个是float: 对；.
我想要一个图标来显示用户可以单击以关闭通知的交叉，这出现在页面底部出现的通知的右上角。
我注意到的是 z-index 对具有样式类的 div 没有任何影响dismiss，无论我如何更改要使用的各种 div。鼠标光标在悬停时不会改变，当我点击图标时不会调用点击监听器。
第二个问题是float: right;样式类notifyRight出现在错误位置的 div。它旨在notifyLeft与,notifyCenter分类的 div出现在同一行，但它出现在下面的行中。
是我试图以另一种方式做得更好，因为我无法解决如何解决这两个问题。
下面的源代码或者你可以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'); });
});