Z-индекс вне контекста

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>