給定三個固定元素，使它們按特定順序呈現

Question

如果我有三個div，每個都有固定的位置。我如何才能讓.inner出現在.overlay之上？

HTML

<div class="container"> 
    <div class="inner">The inner container</div> 
</div> 
<div class="overlay"></div> 

CSS

.container { 
    position: fixed; 
    z-index: 1; 
    background: red; 
    height: 100px; 
    width: 100%; 
} 
.inner { 
    z-index: 3; 
    position: fixed; 
    margin-top: 10px; 
    width: 100%; 
    background: yellow; 
    height: 30px; 
} 
.overlay { 
    z-index: 2; 
    position: fixed; 
    background: blue; 
    opacity: 0.5; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

在這個JS提琴，你可以看到 「黃色」 元素如何呈現的覆蓋之下。在保持.container固定的情況下是否有可能進行更改？

http://jsfiddle.net/4ne83oa4/8/

Answer 1

好吧，如果你必須保持標記爲是，你可以玩一些僞類爲.container類。

標記保持不變，則CSS chages有點像這樣：check js fiddle

.container { 
    position: fixed; 
    background: red; 
    height: 100px; 
    width: 100%; 
    z-index: 1; 
} 
.container:after, 
.container:before{ 
    content: ''; 
    position: fixed; 
} 
.container:after{ 
    z-index: -1; 
    background: red; 
    height: 100px; 
    width: 100%;  
} 
.container:before{ 
    z-index: 1; 
    background: blue; 
    opacity: 0.5; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 
.inner { 
    position: fixed; 
    margin-top: 10px; 
    width: 100%; 
    background: yellow; 
    height: 30px; 
    z-index: 1; 
}