[英]Sticky header z-index lower than overlay z-index but still appears in front
I have a sticky header that needs some z-index to be infront of the page content.我有一个粘性 header 需要一些 z-index 才能位于页面内容的前面。
The sticky-header scss is:粘头scss是:
.sticky-header {
position: sticky;
top: 0;
padding-top: $spacing;
background-color: $background-color;
z-index: 100;
}
In the content of the page, I have a "modal view" that contains an overlay ( modal-container
) element that I want to display above the entire page.在页面的内容中,我有一个“模态视图”,其中包含我想要显示在整个页面上方的覆盖 (
modal-container
) 元素。 The modal css looks like:模态 css 看起来像:
.modal-container {
z-index: 3000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
}
.modal-inner {
z-index: 100;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For some reason, the sticky header is being displayed above the modal overlay, even though it explicitly has a greater z-index value.由于某种原因,粘性 header 显示在模态叠加层上方,即使它明确具有更大的 z-index 值。
The gist of the html structure is: html结构的要点是:
<div class="sticky-header">...</div>
<div class="page-content">
<div class="modal-container">
<div class="modal-inner">
...content...
</div>
</div>
</div>
Also the sticky-header wraps an angular ng-content
if that has anything to do with this issue.如果这与此问题有关,则粘性标题也会包装 angular
ng-content
。
Any help is appreciated!任何帮助表示赞赏!
Usually this is caused by a misunderstanding of the stacking index .这通常是由于对堆叠索引的误解造成的。
The easiest way to debug it is to manually stick a huge z-index on each parent element of the <div class="modal-container">
until you find out which is the problematic element.调试它的最简单方法是在
<div class="modal-container">
的每个父元素上手动粘贴一个巨大的 z-index,直到找出有问题的元素。
At a guess, you've set position:relative
on your <div class="page-content">
, and you've given it a z-index
of less than 100.猜测一下,您已经在
<div class="page-content">
上设置position:relative
,并且您给它的z-index
小于 100。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.