"位置:固定& quot;当父母有“转换"字样时，父母不会醒来CSS属性 [英] "position: fixed" not woking when parent has the "transform" CSS property

问题描述

在我的项目中，我有一个屏幕，该屏幕应从屏幕的右侧放进去，因此我使用了 transform:translateX(100％)，然后将其更改为 transform:translateX(0％).它可以正常工作，可以达到缓解效果，但是在该屏幕上，我具有操作按钮，该按钮的css属性为 Position:Fixed; Bottom:0px; ，但这不起作用，我的意思是它不粘在屏幕底部.

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

In my project I have screen which should ease-in from right side of the screen so for that thing I have used transform: translateX(100%) and then changing that to transform: translateX(0%). it works fine I able to achieve the ease-in effect but in that screen I have action button which has css property of Position: Fixed;Bottom: 0px; but this is not working I mean its not sticking in the bottom of the screen.

Here is my JSfiddle : https://jsfiddle.net/sureshpattu/a1seze4x/

HTML:

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:

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);
  }
}

推荐答案

这不是错误.

看看规格:转换渲染模型

为"transform"属性指定"none"以外的其他值在它所在的元素上建立一个新的局部坐标系应用于.

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

因此根据规范:具有固定位置的元素将相对于具有变换的元素-而不是视口

So according to the spec: the element with fixed positioning will become relative to the element with the transform - not the viewport

作为解决方法，您可以:

As a workaround you could:

1)使用过渡(例如，在 left 属性上)代替转换( translateX )

1) Use transitions (eg. on the left property) instead of transform (translateX)

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

2) Remove the position:fixed button from the container which uses transforms

这篇关于"位置:固定& quot;当父母有“转换"字样时，父母不会醒来CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！