如何固定所有位置的通知：

Question

我已经在图片中创建了一个通知

但是某些扩展名将显示在此通知上方

此CSS以获得通知

display: block;
position:fixed;

“在线” css

display:inline-block;

Answer 1

其他元素也可能带有position:fixed。一种解决方案是使用z-index并将其设置为高于其他元素

由于您没有提供任何示例html / css来重复此问题，因此我将使用一些通用HTML：

div:first-of-type {
  background: red;
  width: 100vw;
  height: 100vh;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: blue;
}

.fixed.green {
  background: green;
  left: 20px;
  top: 20px;
}

<div>Some content</div>
<div class="fixed green">Fixed element</div>
<div class="fixed">Another fixed element</div>

如您所见，绿色div位于蓝色div下面。这将代表您的通知。

通过向绿色div中添加z-index:5;（在此示例中，任何大于1的值都可以使用），绿色div的显示级别将高于蓝色div并变为可见：

div:first-of-type {
  background: red;
  width: 100vw;
  height: 100vh;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: blue;
}

.fixed.green {
  background: green;
  z-index: 5;
  left: 20px;
  top: 20px;
}

<div>Some content</div>
<div class="fixed green">Fixed element</div>
<div class="fixed">Another fixed element</div>

z-index的最大值因浏览器而异，但通常为数百万。随时将通知z-index设置为9999或其他一些超高值。