PNotify on jQuery Mobile -使用样式的问题

Question

我的问题是页面上的内容出现在通知的上方。我试着玩.ui-notify的z指数，但这并没有改变什么。

而且，通知总是白色的，即使我指定了type: "error"或type: "success"。

演示

我是不是遗漏了什么？谢谢!

更新

我实现了使用下面的css (需要PNotify )来获得PNotify的外观和感觉(通过引导)通知。见演示。

/* info */
.ui-pnotify-container{
    color: #31708f !important;
    background-color: #d9edf7 !important; 
    border-color: #bce8f1;
    background: none;
}

/* error */
.ui-pnotify-container.ui-state-error {
    color: #a94442 !important;
    background-color: #f2dede !important; 
    border-color: #ebccd1;
    background: none;
}

/* success */
.ui-state-default {
    color: #3c763d !important;
    background-color: #dff0d8 !important; 
    border-color: #d6e9c6;
    background: none;
}

/* warning */
.ui-pnotify-container.ui-state-highlight {
    color: #8a6d3b !important;
    background-color: #fcf8e3 !important; 
    border-color: #faebcc;
    background: none;
}

.ui-pnotify-container .ui-icon {
    background: none;
}

.ui-icon-close{
    position: relative;
    text-indent: 0px;
    width: 24px;
    height: 24px;
    margin-right: 20px;
}

.ui-icon-close:before {
    content: "\f00d";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;           
    position: absolute;
}

Answer 1

这不是z索引问题，而是由于某种原因，通知上的背景色是透明的。您的CSS或它正在加载的顺序有问题.

更新的演示

通过将这些CSS规则添加到小提琴中，通知不再透明：

.custom-notif {
    background: white;
}
.ui-state-error {
    background: red;
    text-shadow: none;
}
.ui-state-default {
    background: green;
    text-shadow: none;
}
.ui-state-highlight {
    background: blue;
    text-shadow: none;    
}