Как обернуть родительский блок вокруг сдвинутого дочернего блока?

Question

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

.main {
  width: 400px;
  min-height: 300px;
  background: red;
  position: relative;
}

.preMain {
  width: 60px;
  height: 60px;
  background: blue;
  position: absolute;
  top: 350px;
}

<div class="main">
  <div class="preMain">
  </div>
</div>

---

Answer 1

Ваша проблема в том, что ваш дочерний блок имеет position: absolute;, что означает, что он больше не влияет на родительский div. Если вы хотите сдвинуть дочерний блок вниз, но при этом он влияет на родительский блок, вам нужно изменить position дочернего блока. Попробуйте что-то вроде этого:

.main {
  width: 400px;
  min-height: 300px;
  background: red;
  position: absolute;
}

.preMain {
  width: 60px;
  height: 60px;
  background: blue;
  position: relative;
  margin: 350px 0px 10px 10px;
}

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

В качестве альтернативы, посмотрите этот пост здесь

Надеюсь, это поможет.

Answer 2

Вы используете position: absolute, что позволяет использовать нижнюю и левую позиции для правильного позиционирования элемента.

.main {
  width: 400px;
  min-height: 300px;
  background: red;
  position: relative;
}

.preMain {
  width: 60px;
  height: 60px;
  background: blue;
  position: absolute;
  bottom: 10px;
  left: 10px
}

<div class="main">
  <div class="preMain">

  </div>
</div>