当父元素具有“transform”CSS属性时，“position: fixed”不起作用

Question

在我的项目中，我有一个屏幕应该从屏幕右侧变得容易，所以我使用了transform: translateX(100%)，然后将其更改为transform: translateX(0%)。它很好地起到了缓慢进入的效果，但在那个屏幕上，我有一个动作按钮，它具有Position: Fixed;Bottom: 0px;的css属性，但这不起作用，我的意思是它不能固定在屏幕底部。

这是我的JSfiddle链接：https://jsfiddle.net/sureshpattu/a1seze4x/

HTML：

<header>
  Heading
</header>
<div class="page__popup page__popup--ease-in-right page__action-btn--visible" style="height: 382px;">
  <div class="container">
  </div>
  <button class="js-action-btn">
    SELECT ROOMS
  </button>
</div>

Css:

header {
  background: #fff;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 2px 2px 10px #000;
}

.container {
  height: 382px;
}

.page__popup {
  position: absolute;
  top: 100vh;
  z-index: 8;
  display: block;
  overflow-y: scroll;
  max-height: 100vh;
  width: 100%;
  height: 0;
  background: #ffffff;
  .js-action-btn {
    position: relative;
    bottom: -50px;
    transition: all 0.25s ease-in-out;
  }
  //Themes
  &--ease-in-bottom {
    &.visible {
      transition: height 0.25s ease-in-out;
      top: 54px;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
  &--ease-in-right {
    transform: translateX(100%);
    height: 100vh;
    top: 60px;
    &.visible {
      transition: transform 0.25s ease-in-out;
      transform: translateX(0);
    }
  }
}

.page__action-btn--visible {
  .js-action-btn {
    background: red;
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 7px 4px 10px rgba(0, 0, 0, .12);
  }
}

- Suresh Pattu

---

无法正常工作？你期望发生什么？问题不是很清楚。 - BenG

Answer 1

这不是一个bug。

看一下规范：变换渲染模型

除“none”以外的任何值用于“transform”属性，都会在应用于该元素时建立一个新的局部坐标系。

因此根据规范：使用固定定位的元素将相对于具有transform的元素 - 而不是视口

作为解决方法，您可以：

1）使用过渡（例如在left属性上）而不是变换（translateX）

2）从使用变换的容器中删除position:fixed按钮

- Danield