div::after with position:fixed breaks

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的position属性更改为absolute会使页面按预期工作，但在Mac上的Chrome和Safari中测试会有很多伪像，并且页面会变得不稳定、速度更慢、响应速度更慢。以下是链接的示例：

Working Production Example -当内容在模糊图像中进行动画处理时会出现抖动，并且页面在滚动时的响应性会明显降低

Broken Example -当点击任何一个按钮来显示内容时，它会停用页面上的所有其他按钮。然而，在我的机器上，背景图像不会在动画后面抖动，页面的响应性也不会降低。

我对我的变通方法很满意(这不是一个商业项目，所以不是一个问题)，但我很好奇为什么位置:属性会以这种方式影响功能。有没有人？

Answer 1

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

您可以添加

pointer-events:none;

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

Answer 2

你的按钮被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>

​