Как использовать transform: translateY для ребенка при автоматическом изменении размера родителя?

Question

Позвольте быть подразделением, содержащим второе подразделение.Первый не имеет замечательного правила 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) желательно, но не обязательно.

Answer 1

Мы бы хотели, чтобы родительское деление увеличивало свою высоту в соответствии с движением своего дочернего деления.Как можно достичь такого результата?

Это невозможно с помощью преобразования, поскольку это сохраняет место, которое элемент занял бы первоначально , зарезервировано, но не делает егозанять место на новой позиции.

Вы можете заставить родителя расти, если вместо этого переместить ребенка с помощью margin-top: 253px;.(Конечно, это приводит к ситуации коллапсирующих полей здесь, но с этим можно бороться, сделав родителя inline-block или установив overflow:hidden.)

Answer 2

добавить margin-top: 90px; к ребенку и добавить padding-top: 1px.надеюсь, это то, что вы ищете.спасибо

ссылка для вашей ссылки.

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