Как создать наслоенный блок, чтобы его высота оставалась неизменной?

Чтобы создать наслоенный блок с двумя элементами, где высота основного блока остается неизменной, можно использовать CSS-свойства для управления позиционированием. Один из способов заключается в использовании свойства `position: relative;` для родительского контейнера и `position: absolute;` для перекрывающего элемента. Вот пример, как это можно сделать:

```html
<div class="container">
    <div class="background">Фоновый элемент</div>
    <div class="overlay">Перекрывающий элемент</div>
</div>
```

```css
.container {
    position: relative; /* Позиционирование для родительского элемента */
    width: 300px; /* Ширина блока */
    height: 200px; /* Высота блока */
    background-color: lightblue; /* Фоновый цвет для видимости */
    overflow: hidden; /* Скрыть переполнение, если нужно */
}

.background {
    width: 100%;
    height: 100%;
    background-color: lightcoral; /* Фоновый элемент */
}

.overlay {
    position: absolute; /* Абсолютное позиционирование */
    top: 20px; /* Положение сверху */
    left: 20px; /* Положение слева */
    width: 100px; /* Ширина перекрывающего элемента */
    height: 100px; /* Высота перекрывающего элемента */
    background-color: rgba(0, 0, 255, 0.5); /* Полупрозрачный цвет для наслоения */
}
```

В этом примере:

1. Блок `.container` имеет фиксированную ширину и высоту (300px на 200px), что позволяет ему сохранять свои размеры.
2. Элемент `.background` занимает всю область контейнера.
3. Элемент `.overlay` с абсолютным позиционированием перекрывает фон, но не влияет на высоту контейнера.

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

.parent {}

.one {
  width: 315px;
  height: 275px;
}

.two {
  width: 450px;
  height: 245px;

  margin-left: 215px;
  margin-top: -210px;
}