[英]CSS position Sticky and Z-Index overlay/modal
i have a problem with the position: sticky and z-index我的位置有问题:sticky 和 z-index
I want my modal in the sticky-element to be overlayed by the overlay.我希望我在粘性元素中的模态被覆盖层覆盖。 With position: relative it works: the modal is before the overlay.
使用 position: relative 可以工作:模态在叠加层之前。 But when I use Sticky the modal is behind the overlay.
但是当我使用 Sticky 时,模态在覆盖层后面。
Hope it's understandable what I mean.希望我的意思可以理解。 Here's the example:
这是示例:
.sticky { position: sticky; /* <-- dosen't work */ /* position: relative; /* <-- work */ top: 0; width: 100%; height: 200vh; background: red; } .modal { z-index: 1000; position: fixed; margin: 0 auto; width: 200px; height: 200px; background: yellow; margin: 0 auto; } .overlay { z-index: 999; position: fixed; width: 100%; height: 100%; background: green; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.75; }
<div class="overlay"></div> <div class="sticky"> <div class="modal">modal</div> </div>
When you set position: relative
, the .modal
element is relative to the body because it has position: fixed
.当你设置
position: relative
, .modal
元素是相对于 body 的,因为它有position: fixed
。 As such, the z-index value of 1000 put it in foreground.因此,1000 的 z-index 值将其置于前台。
When you use position: sticky
, the .sticky
element is positionned, with the default z-index value.当你使用
position: sticky
, .sticky
元素被定位,使用默认的 z-index 值。 Therefore, it positions itself in background because .overlay
's z-index value of 999. .modal
being a child of .sticky
, it will never be able to go in front of .overlay
.因此,它将自己定位在后台,因为
.overlay
的 z-index 值为 999。 .modal
是.modal
的子.sticky
,它永远无法走在.overlay
前面。
You must change the structure of your HTML, or simply add a z-index on your .sticky
element.您必须更改 HTML 的结构,或者只是在
.sticky
元素上添加 z-index。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.