Question

在这里我试图在body类div的顶部制作通知框但是无法做到这一点逻辑说定位元素应该位于未定位的元素之上但是没有发生

尝试甚至使body class div相对并给它z-index但也失败了通知框的结构是绝对元素中相对元素的绝对元素（对于CSS动画问题）

HTML

<div class="notiIcon glyphicon glyphicon-globe">
</div>
<div class='notiAbs '>
    <div class='notiContainer'>
        <div class="notiBox">
            <div class="notiHeader">
                <span class="notiHeaderSpan">notifications</span>
            </div>
            <div class="notiBody">
                <div class="notiElement">Collaboratively enable high-quality imperatives before ubiquitous paradigms.
                </div>
                <div class="notiElement">Credibly productize customized services whereas.</div>
                <div class="notiElement">Efficiently embrace real-time markets without.</div>
                <div class="notiElement">Synergistically simplify collaborative web services.</div>
                <div class="notiElement">Intrinsicly evisculate magnetic e-services through.</div>
                <div class="notiElement">Holisticly build customer directed technologies.</div>
                <div class="notiElement">Phosfluorescently synthesize team driven strategic.</div>
            </div>
            <div class="notiFooter"><span class="notiHeaderSpan">See All</span></div>
        </div>

    </div>
</div>
<div class="body">aasdasdasdasdasdasdas</div>

CSS

.notiAbs{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    /* overflow-y: hidden; */
    height: 500px;
    width: 500px;
    /* overflow-x: hidden; */
    overflow-y: hidden;
       margin: 0 auto;
    padding-left: 50px;

}
.notiContainer{
    position: relative;
}
.notiIcon{
    z-index: 5;
    position: relative;
    width:100%;
    text-align: center;
        font-size: 25;
    cursor: pointer;
    padding-top: 10px;

}
.notiIconNumber{
    position: relative;
    font-size: 15px;
    color: white;
    background-color: red;
    top: -10;
    left: -9;
    padding: 2px;
}
.notiBox{
    z-index: 4;
    position: absolute;
    height: 400px;
    width: 400px;
    display: block;
    padding-top: 10px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 7px;

}
.notiElement{
    overflow-wrap:break-word; 
    font-size: 17px;
    padding: 10 0px;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: lightgray;
}
.notiHeader,.notiFooter{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    height: 15%;
    display: table;
    width: 100%;
}
.notiHeaderSpan,.notiFooterSpan{
    display: table-cell;
    vertical-align: middle;
}
.notiFooter{
        box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.1);
        cursor: pointer;
}
.notiHeader{
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
}
.notiBody{
        padding: 20px;
        overflow: auto;
        height:70%;
}
.body{
}

Answer 1

它位于顶部，但背景是透明的，因此它产生的幻觉不是。只需按如下方式设置背景颜色：

.notiBox{
    z-index: 4;
    position: absolute;
    height: 400px;
    width: 400px;
    padding-top: 10px;
    border-style:solid;
    background:#666;

}

检查Fiddle。

Answer 2

我认为你的通知框是类＆＃34; notiBox＆＃34;在顶部。它似乎不是因为它具有透明的继承背景颜色。

如果将background-color属性设置为＆＃34; yellow＆＃34; （例如，你会看到它位于元素的顶部，类为＃34; body＆＃34;。

这有意义吗？如果你需要我，我可以进一步解释。

我已经更新了我的答案，再次查看了HTML我已经意识到带有类＆＃34; notiBox＆＃34;可能是你想要出现在最上面的唯一元素（及其内容）

z-index与静态元素

2 个答案: