Jquery z-指数和浮动：对，在一起打得不好

我有两个问题，一个是z-index，另一个是float:right

我想有一个图标来显示一个十字，用户可以单击它来取消通知，它显示在页面底部通知的右上角

我注意到，无论我如何更改要使用的各种div，z索引对样式类为

discouse

的div没有任何影响。鼠标光标在悬停时不会改变，单击图标时不会调用click listener

第二个问题是

float:right

div，样式类

notifyRight

出现在错误的位置。它将显示在与

notifyLeft

，

notifyCenter

分类div相同的行中，但它将显示在下面的行中

我正试图用另一种方式做得更好，因为我无法解决这两个问题

下面是源代码，也可以

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>

* {
    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;
}

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

JS:

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

* {
    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;
}

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

---

z-index

仅适用于定位元素（即，默认值为static以外的值）。将

position:relative

添加到您的

。退出
类，您可以单击元素：

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


然后，要在同一行上显示通知图标，请将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>



谢谢，这是第一个！有没有关于浮动的想法：对；问题？+1-该死的，你比我快了。这是因为中心div的宽度未知，所以它需要先知道右手边吗？我真的不明白顺序改变的原因。顺序需要改变，因为你需要把左右浮动的元素推到一边，让中心元素浮动起来，占据它们之间的空间。明白了吗<代码>左边距：自动；右边距：自动；显示：块在图像上。