css - z-index 断章取义

Question

这是简化的标记:

<div id="container">
        <div id="top" style="position:fixed">
            <div class="header-top" style="z-index:100"></div>
            <div id="access" style="z-index:100"></div>
            <div id="image" style="z-index:50"></div>
        </div><!--end top-->
        <div id="main" style="z-index:75"></div>
    </div>

当 #main 在固定的 #top 元素上滚动时，我希望它分层显示在 #image 之上，但在 #access 和 .header-top。

由于 #top 的固定位置创建了一个上下文，看来我遇到了问题。

有什么想法吗？

Answer 1

您需要插入您的 <div id="main">里面<div id="top">毕竟。 您可以为固定元素创建特定类。

#access, #main, #image {
            width:200px;
            height: 200px;                
}
.fixed {
            position:fixed;
    }
#access {
            background-color:red;
            margin: 100px 0 0 100px;
    }
#main {
            background-color:blue;
            margin: 50px 0 0 50px;
            position:absolute;        
    }
#image {
       background-color:green;
}

<div id="container">
    <div id="top">
        <div class="header-top fixed" style="z-index:100"></div>
        <div id="access" class="fixed" style="z-index:100"></div>
        <div id="image" class="fixed" style="z-index:50"></div>
        <div id="main" style="z-index:75"></div>
    </div><!--end top-->    
</div>