Question

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

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

在现实生活中，红色代表我在Angular中的ui-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

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

这意味着蓝色元素将变为相对于具有变换的元素（红色父元素） - 不相对于视口（类似于常规静态元素）

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

以下是一个例子：

＆＃13;

var button = document.querySelector('button'),
    boxRed = document.querySelector('.box-red');

button.addEventListener('click', function() {
  boxRed.classList.toggle('box-move');  
});

＆＃13;

.box-yellow {
  background-color: yellow;
  position: relative;
  height: 200px;
  width: 200px;
  transform: translate(0, 0);
  float: left;
}

.box-red {
  background-color: red;
  height: 100px;
  width: 100px;  
}

.box-blue {
  background-color: blue;
  bottom: 0;
  height: 50px;
  position: fixed;
  right: 0;
  width: 50px;
}

.box-move {
  left: 100%;
  position: relative;
  margin-left: -50%;
}

button {
  margin-left: 20px;
}

＆＃13;

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

＆＃13;

希望这会有所帮助：）

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，这意味着它不会成为框蓝色的相对父级。

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

2 个答案: