Например, у меня есть элемент, который имеет те же свойства ширины и высоты, что и его родитель.Я хочу, чтобы родительский элемент содержал дочерний элемент, даже если применяются значения translate или transform.
Когда я применяю свойства x и y к translate или transform, дочерний элемент удаляется от своего родителя.Я пробовал значения позиции, но это не похоже на работу.
.parent {
width: 50px;
height: 50px;
background: #ddd;
}
.child {
width: 50px;
height: 50px;
background: red;
transform: translate(40px, 40px);
}
<div class="parent">
<div class="child">
</div>
</div>
<p>how do I restrict the red one within it's parent?</p>