Перекрывать тег div, сохраняя все div и контент ниже на месте ⇐ Html

[Anonymous]

Я пытаюсь наложить второй дивинг на мой первый див. Это работает нормально. Тем не менее, проблема, с которой я сталкиваюсь, заключается в том, чтобы сохранить весь оставшийся контент на месте. Потому что я использую позиционирование, чтобы наложить второй Div, каждый элемент и содержание после того, как он не течет по желанию. < /P>
Я пробовал: < /p>

• Использование настроек, связанных с «clear», «дисплей», «flex» < /strong> в различных областях, и это не сработало. < /li>
  Игра с высотами контейнеров - это другие промежуточные теги div , но это не всегда работает с различным отзывчивым поведением размера браузера - и не видит правильного.
  < li> разгоняет структуру или макет Divs , но это не решает конечную проблему. Этот сайт , однако, большинство только обсуждает, как сделать наложение, , но они не решают мой конкретный вопрос о влиянии другого контента впоследствии .

Fiddle:
https://jsfiddle.net/ptwonbro/7wg5tpj0/13/
.my-container {
border: 10px solid black;
position: relative;
}
.my-div-1 {
border: 10px solid red;
background: lightblue;
height: 100px;
}
.my-div-2 {
border: 10px solid blue;
background: white;
height: 240px;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, 10%);
width: 80%;
}
.my-div-3 {
border: 10px solid green;
background: yellow;
height: 100px;
}
< /code>
Диаграмма того, что я пытаюсь сделать: < /p>


Подробнее здесь: https://stackoverflow.com/questions/794 ... w-in-place