Изображения с фиксированным положением, наложенные друг на друга в CSS ⇐ CSS

[Anonymous]

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

Код: Выделить всё

[img]./img1.svg[/img]
[img]./img2.svg[/img]
[img]./img3.svg[/img]
[img]./img4.svg[/img]




body {
margin: 0;
}

img {
width: 100%;
position: sticky;
left: 0;
top: 0;
}

Код: Выделить всё

body {
margin: 0;
}

img {
width: 100%;
position: sticky;
left: 0;
top: 0;
}

Код: Выделить всё

[img]https://unixpariah.github.io/automatic-sniffle/images/jelenie/tlo.svg[/img]
[img]https://unixpariah.github.io/automatic-sniffle/images/jelenie/1.svg[/img]
[img]https://unixpariah.github.io/automatic-sniffle/images/jelenie/2.svg[/img]
[img]https://unixpariah.github.io/automatic-sniffle/images/jelenie/3.svg[/img]

также здесь есть ссылка на страницы gh, где можно визуализировать проблему
https://unixpariah.github.io/automatic-sniffle/
Исходное состояние, которое я ищу:


Состояние после прокрутки (игнорируйте текст):



Подробнее здесь: https://stackoverflow.com/questions/786 ... her-in-css