如何在自动调整父级大小时对子级使用 transform: translateY？

How to use transform: translateY on a child while automatically resizing the parent?

设是一个包含第二个分区的分区。第一个没有显着的 CSS 规则；第二个由其宽度和高度定义。两者都是彩色的。

几个像素的 Y 平移应用于子分区，如下所示：

https://codepen.io/anon/pen/KbjLMw

来源

HTML

<div id="parent">  
  <div id="child"></div>
</div>

CSS

#parent {
  background: red;
}

#child {
  background: yellow;
  width: 100px;
  height: 100px;
  transform: translateY(253px);
}

问题

我们希望父分区的高度随着子分区的移动而增加。怎么会出现这样的结果呢？使用 transform: translateY(xyz) 是可取的，但不是必需的。

将 margin-top: 90px; 添加到 child 并添加 padding-top: 1px。希望这就是您要找的。谢谢

link 供参考

https://codepen.io/Xenio/pen/XOXJGz

We would like the parent division to see its height increased according to the movement of its child division. How could such a result be achieved?

使用转换是不可能的，因为这保留了 space 元素本来 最初 保留的，但它不会使 [=23] =] 在新位置。

如果通过 margin-top: 253px; 移动子项，则可以让父项增长。 （当然，这会导致 collapsing margins 的情况，但是可以解决 f.e。通过使父级 inline-block 或设置 overflow:hidden。 )