Фиксировать блоки при скролинге, относительно друг друга

body { height: 1000px }

.hd {
   width: 100%;
   height: 20px;
   background: red;
   position: sticky;
   top:0;
}

.mn {
   height: 100px;
   width: 100px;
   background: green;
   position: sticky;
   top:20px;
}
<body>
   <div class='hd'>...</div>
   <div class='mn'>...</div>
   текст текс
</body>

Блок .mn фиксируем top:20px;. Ок, работает. Вопрос в том, возможно сделать так, чтобы при скроллинге. Блоки фиксировались у верхнего края, не указывая отступы? Сделать так, чтобы все блоки, что имеют position: sticky; были блочными относительно друг друга. То есть не забивать голову тем, чтобы выставить отступ top

Как разместить текст(контент) правее зеленого блока, при этом не оборачивая в html блоки


Ответы (0 шт):