如何设置固定元素，将其置于粘滞状态，高于相对位置 [英] How to set fixed element, that placed in sticky one, higher than relative

问题描述

我将固定元素放置到另一个粘性元素上，并希望它覆盖页面上的所有其他元素.看起来很明显，但是... 最好看一下Codepen. 我认为这不是正常行为.

I place fixed element to onaother sticky element and want it to cover any other elements on page. It looks obvious, but... Better look at codepen. I think this is not normal behavior.

经过镀铬测试-非常奇怪. 在Firefox中进行了测试-抽奖时出现故障(尝试单击未播放的黑色区域)

Tested in chrome - just very strange. Tested in firefox - glitching in draw (try to click on undilplayed black area)

这是很明显的错误重播，我真的需要固定元素在粘性元素中，并在其相对元素旁边放置

This is clear bug replay and i realy need fixed element in sticky element that cover placed next to it relative element.

任何人都可以帮忙吗?

看代码-我尝试使用z-index并在粘滞以上和之后的结果非常不同. "z-index:-1;"看起来hack接近成功，但是我页面上还有很多其他元素的z索引都是正数.

Look to code - i try to play with z-index and result above sticky and after it is very different. "z-index:-1;" looks like hack near to success, but i have a lot of other elements on page that has positive z-index.

在这里看我测试笔的地方

Look here my pen where i tested it

/* bug ----------------*/
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:0;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

推荐答案

您需要增加粘性元素的z-index

You need to increase z-index of the sticky element

/* bug ----------------*/
.sticky {
  position: sticky;
  z-index:1;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:0;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

在 MDN页面中:

此值始终创建一个新的堆栈上下文.

This value always creates a new stacking context.

因此对固定元素使用z-index是没有用的，因为它属于由粘性元素创建的堆栈上下文，并且由于 bug 元素也被定位为z-index等于0，因此树顺序将决定绘画顺序:

So using z-index for the fixed element is useless because it belongs to the stacking context created by the sticky elemen and since bug elements are also positionned with z-index equal to 0 the tree order will decide about the painting order:

1. 按树顺序排列的所有已定位，不透明或转换后代，分为以下类别:

1. All positioned, opacity or transform descendants, in tree order that fall into the following categories:

1. 所有定位的后代，其"z索引:自动"或"z索引:0"以树顺序排列. ^参考

您还可以降低bug元素的z-index，但我不建议这样做，因为您可能会遇到有害的行为，其中元素可能隐藏在后面:

You can also decrease the z-index of the bug element but I don't recommend as you may face unwanted behavior where elements can be hidden behind:

/* bug ----------------*/
.sticky {
  position: sticky;
  z-index:1;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  position: relative;
  z-index:-1;
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

您还可以简单地删除 bug 元素的positon:relative:

You can also simply remove positon:relative for bug elements:

/* bug ----------------*/
.sticky {
  position: sticky;
}
.fixed {
  position: fixed;
  z-index:1;
}
.bug {
  z-index:1000; /* have no effect on non-postionned element*/
}

/* visual ----------------*/
.sticky {
  background: silver;
  padding: 10px;
  top:40px;
  bottom:40px;
}
.fixed {
  background: rgba(0, 0, 0, 0.8);
  width: 10%;
  left: 25%;
  height: 100%;
  top: 0px;
  color: white;
  padding: 10px;
}
.bug {
  background:  rgba(0, 255, 0, 0.9);
  height: 100px;
  width: 40%;
  padding: 10px;
  margin:5px;
  margin-left:10%;
  
}

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

<div class=sticky>i am sticky
  <div class="fixed">
    i am fixed in sticky <br> 
    z-index:1;
  </div>
</div>

<div class="bug">
  am i bug ?<br> 
  z-index:0;
</div>

相关:为什么带有z-index值的元素不能覆盖其子级?

如果您不能更改粘滞元素的z-index，并且不能从 bug 元素中删除position:relative，并且不能将其z-index降低到低于0，并且不能更改HTML结构，那么您将无法执行此操作.

If you cannot change z-index of the sticky element and you cannot remove position:relative from bug elements and you cannot decrease their z-index lower than 0 and you cannot change the HTML structure then you have no way to do this.

这篇关于如何设置固定元素，将其置于粘滞状态，高于相对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！