Использование позиции: липкий для фиксации элемента в верхней части его родительского контейнера. ⇐ CSS

[Anonymous]

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

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

.header {
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
margin: 0px 25px;
height: 64px;
background-color: blue;
position: fixed;
top: 0px;
z-index: 999;
width: 100%;
}

.content {
width: inherit;
box-sizing: border-box;
}

.banner {
position: sticky;
top: 0px;
width: inherit;
z-index: 100;
box-sizing: border-box;
background-color: red;
width: 100%;
}

.form {
padding-top: 15px;
padding-left: 24px;
padding-right: 24px;
display: flex;
flex-flow: wrap;
width: 100%;
height: 1000px;
background-color: green;
z-index: -9;
}

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

HEllo

Раздел содержимого абстрагируется в отдельный раздел компонент, поэтому я не могу изменить top:0
Песочница

Подробнее здесь: https://stackoverflow.com/questions/783 ... -container