javascript - div::after with position:fixed 中断站点

Question

[重新发布已删除的问题并提供更多详细信息]我已经搜索了这个问题的答案，但没有找到任何类似的引用。这是 HTML/CSS/Javascript 的最小版本:

function switchitem(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("item-wrap-hidden") != -1) {
    x.className = "item-wrap";
  } else {
    x.className = x.className.replace("item-wrap", "item-wrap-hidden");
  }
}

button.accordion {
  background-color: #333;
  color: #eee;
}

.active,
.accordion:hover {
  background-color: #666;
}

.item-wrap {
  overflow: hidden;
  z-index: 0;
  position: relative;
}

.item-wrap-hidden {
  position: absolute;
  left: -999em;
}

<button onclick="switchitem('id')" class="accordion">Show / Hide Content</button>
<div id="id" class="item-wrap-hidden">
  <p>content that is hidden and revealed goes here</p>
</div>

这完全符合预期:按钮在屏幕上，单击按钮时出现元素包装框，再次单击按钮时元素包装框消失。在生产版本中，有一些样式和 CSS 动画。

然后我继续设计元素包装框的样式，使其背景是 body 背景图像的模糊低不透明度版本，这破坏了功能。非工作最小版本:

function switchitem(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("item-wrap-hidden") != -1) {
    x.className = "item-wrap";
  } else {
    x.className = x.className.replace("item-wrap", "item-wrap-hidden");
  }
}

button.accordion {
  background-color: #333;
  color: #eee;
}

.active,
.accordion:hover {
  background-color: #666;
}

.item-wrap {
  overflow: hidden;
  z-index: 0;
  position: relative;
}

.item-wrap::after {
  overflow: hidden;
  content: "";
  background-image: url("page_background_image.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  opacity: .8;
  filter: alpha(40);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.item-wrap-hidden {
  position: absolute;
  left: -999em;
}

<button onclick="switchitem('id')" class="accordion">Show / Hide Content</button>
<div id="id" class="item-wrap-hidden">
  <p>content that is hidden and revealed goes here</p>
</div>

一旦内容显示出来，添加这个按钮就会停用，所以它不能再次隐藏。在我的生产页面上，有多个 Accordion 折叠，它会停用所有折叠的按钮，所以一旦你取消隐藏一个折叠，你就不能做任何其他事情。

将 item-wrap::after 的 position 属性更改为 absolute 可使页面按预期工作，但在 Mac 上的 Chrome 和 Safari 中进行测试时会出现很多瑕疵，页面变得颤抖、变慢且响应速度变慢。以下是链接示例:

Working Production Example - 当内容在抖动后面的模糊图像中动画化时，页面在滚动时响应明显变慢

Broken Example - 当点击任何按钮显示内容时，它会停用页面上的所有其他按钮。但是，在我的机器上，背景图像不会在动画后面抖动，页面的响应速度也不会变慢。

我对我的解决方法很满意(这不是一个商业元素，所以紧张不是问题)，但我很好奇为什么 position: 属性会以这种方式影响功能。有人吗？

Answer 1

你的按钮被 position: fixed 伪元素挡住了，给它 position: relative 和 z-index 让它向上移动

function switchitem(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("item-wrap-hidden") != -1) {
    x.className = "item-wrap";
  } else {
    x.className = x.className.replace("item-wrap", "item-wrap-hidden");
  }
}

button.accordion {
  background-color: #333;
  color: #eee;
  position: relative;
  z-index: 1;
}

.active,
.accordion:hover {
  background-color: #666;
}

.item-wrap {
  overflow: hidden;
  z-index: 0;
  position: relative;
}

.item-wrap::after {
  overflow: hidden;
  content: "";
  background-image: url("page_background_image.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  opacity: .8;
  filter: alpha(40);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.item-wrap-hidden {
  position: absolute;
  left: -999em;
}

<button onclick="switchitem('id')" class="accordion">Show / Hide Content</button>
<div id="id" class="item-wrap-hidden">
  <p>content that is hidden and revealed goes here</p>
</div>