[英]z-index of child element of a flex item
我想要一個flex項( .image-container
)的絕對定位子元素( .tag-preview-container
)來重疊DOM中的其他元素(例如標題.header
)。 我將絕對定位元素的z-index
設置為2(甚至1應該工作)。 但是,元素不會與Flex容器外的任何DOM元素重疊( .tags-panel
)。 事實上,它完全被容器切斷了。 我沒有設置DOM中任何其他元素的z-index,因此根應該是堆疊上下文。
<div class="panel-container">
<div class="header">
</div>
<div class="tags-panel">
<div class="image-container">
<div class="tag-preview-container">
</div>
</div>
<div class="image-container">
</div>
<div class="image-container">
</div>
<div class="image-container">
</div>
</div>
</div>
這是scss代碼,這里是JSFiddle
.panel-container {
width: 400px;
height: 400px;
position: relative;
margin: auto;
.header {
width: 100%;
height: 40px;
background-color: green;
}
.tags-panel {
position: absolute;
background-color: red;
top: 40px;
bottom: 0px;
width: 100%;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
}
.image-container {
flex: 0 0 33%;
box-sizing: border-box;
border: 1px solid black;
margin-top: 5px;
margin-left: 1px;
height: 80px;
background-color: yellow;
position: relative;
.tag-preview-container {
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
z-index: 2;
opacity: 0.5;
}
}
z-index
受.tags-panel
的overflow
屬性影響,刪除overflow-y: auto;
將解決問題。 這是更新的小提琴https://jsfiddle.net/yc5xanax/
overflow-y: auto;
將自動包裝/隱藏.tags-panel
容器外的內容。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.