div :: after with position：fixed break site

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动画。

然后我继续设置项目包装盒的样式，使其背景是身体背景图像的模糊低透明度版本，这打破了功能。非工作最小版本：

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>

添加此项会在内容显示后停用按钮，因此无法再次隐藏。在我的制作页面上，有多个手风琴折叠，它会停用所有按钮的按钮，所以一旦你取消隐藏一个折叠，你就无法做任何其他事情。

将item-wrap::after的位置属性更改为absolute使页面按照需要工作，但在Mac上的Chrome和Safari中测试有很多工件，页面变得模糊，速度慢，响应速度慢。以下是链接的示例：

Working Production Example - 当内容在抖动背后的模糊图像中进行动画处理时，滚动时页面的响应速度明显降低

Broken Example - 当点击任何按钮以显示内容时，它会停用页面上所有其余按钮。但是，背景图像不会在我的机器上的动画后面抖动，并且页面的响应性不会降低。

我对我的解决方法感到满意（这不是一个商业项目，因此抽搐不是问题），但我很好奇为什么position：property以这种方式影响功能。任何人？

Answer 1

你的::after在整个屏幕上，所以你点击它而不是按钮。按钮位于::after的“下方”。您可以通过删除不透明度来查看。

你可以加

pointer-events:none;

到::after，所以你实际上是点击按钮。

Answer 2

你的按钮被位置阻止：固定的伪元素，给它位置：相对和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>