【问题标题】:How do I fixed this notice for all position:fixed;如何为所有职位修复此通知:已修复;
【发布时间】:2019-04-30 16:24:55
【问题描述】:

我已经创建了一个如图所示的通知

但此通知上方会出现一些扩展名

这个css通知

display: block;
position:fixed;

对于“在线”css

display:inline-block;

【问题讨论】:

  • 请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样,很难准确地说出你在问什么。
  • 寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
  • 你真的需要在这里澄清一下。我完全不知道你在找什么?
  • 您能否添加一些示例 html 和 css,以便我们可以复制问题并为您提供帮助?

标签: javascript html css


【解决方案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 之下。这将代表您的通知。

通过将z-index:5; 添加到绿色 div(在此示例中,任何大于 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 或其他一些超高值。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-10-10
    • 2017-01-11
    • 2022-08-17
    • 2022-01-11
    • 2010-12-22
    • 2011-12-30
    • 2021-01-29
    相关资源
    最近更新 更多