CSS 转换的父级影响子级位置

Question

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

我希望蓝色框保持在黄色框的右下角。但是当我翻译红色框时，蓝色框会移动到他的（红色）父级。

在现实生活中，红色方框代表我在 Angular 中的 ui-view。视图正在滑入和滑出。我无法更改 HTML 层次结构。

查看我的代码笔 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

为“transform”属性指定“none”以外的值 在它所在的元素处建立一个新的局部坐标系 应用于。

这里的意思是蓝色元素将成为相对于具有变换的元素（红色父元素） - 而不是相对于视口（如常规静态元素）

但是，我们可以通过对黄色框应用变换来解决这种情况，并获得蓝色框的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>

希望这会有所帮助:)

Answer 2

我认为您唯一的方法是使用margin-left 并计算框的大小。比如：

button.addEventListener('click', function() {
   var boxRedWidth = boxRed.getBoundingClientRect().width;
   boxRed.style.marginLeft = boxRedWidth +"px"; 
});

这是由于 translateX 本质上使其成为 relative 位置对象，这意味着 .box-blue 作为其相对父级跳转到该位置对象中。 对于 margin-left，.box-red 仍然是 static，这意味着它不会成为 box-blue 的相对父级。