html - CSS 转换父级影响子级位置

Question

为什么转换父级时子级位置会受到影响？

我希望蓝色框保持在黄色框的右下角位置。但是当我翻译红色框时，蓝色框将移动到他的(红色)父级。

在现实生活中，box-red 代表我在 Angular 中的 ui-view。 View 正在滑入和滑出。我无法更改 HTML 层次结构。

查看我的codepen https://codepen.io/benbesuijen/pen/GPOQjM

HTML

<div class="box-yellow">
    <div class="box-red">
        <div class="box-blue"></div>
    </div>
</div>

CSS

.box-yellow {
  background-color: yellow;
  position: relative;
  height: 200px;
  width: 200px;
}

.box-red {
  background-color: red;
  height: 100px;
  width: 100px;  
}

.box-blue {
  background-color: blue;
  bottom: 0;
  height: 50px;
  position: absolute;
  right: 0;
  width: 50px;
}

.box-move {
  transform: translateX(100%);
}

Answer 1

查看规范:The Transform Rendering Model

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

这意味着蓝色元素将成为相对于具有变换的元素(红色父元素) - 而不是相对于视口(viewport)(像常规静态元素)

但是，我们可以通过对黄色框应用变换来解决这种情况，并让蓝色框的 position: fixed。

下面是一个例子:

var button = document.querySelector('button'),
    boxRed = document.querySelector('.box-red');

button.addEventListener('click', function() {
  boxRed.classList.toggle('box-move');  
});

.box-yellow {
  background-color: yellow;
  transform: translate(0, 0);
  float: left;
  position: relative;
  height: 200px;
  width: 200px;
}

.box-red {
  background-color: red;
  height: 100px;
  width: 100px;  
}

.box-blue {
  background-color: blue;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 50px;
  width: 50px;
}

.box-move {
  margin-left: 50%;
}

button {
  margin-left: 20px;
}

<div class="box-yellow">
  <div class="box-red">
    <div class="box-blue"></div>
  </div>
</div>

<button>Translate red box</button>

希望这有帮助:)