jquery - z-index と float: 正しく連携していません

Question

私はいくつかの問題を抱えています.1つはz-indexで、もう1つはfloatです。.

ユーザーがクリックして通知を閉じることができる十字を表示するアイコンが必要です。これは、ページの下部に表示される通知の右上に表示されます。

私が気付いたのは、dismiss使用するさまざまな div を変更しても、z-index は style class の div に影響を与えないことです。ホバー時にマウス カーソルが変化せず、アイコンをクリックしてもクリック リスナーが呼び出されません。

2 番目の問題は、スタイル クラスが間違った場所に表示されるfloat: right;divです。分類された div と同じ行に表示されることを意図していますが、下の行に表示されていnotifyRightます。notifyLeftnotifyCenter

これら2つの問題を解決する方法が見つからないため、私がやろうとしていることは別の方法でうまくやろうとしています.

以下のソース コードまたは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'); });
});