Проблема с Position Sticky Stick, палки, но при прокрутке больше оставьте свое положение ⇐ Html

[Anonymous]

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

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

body {
margin-bottom: 300000px;
}

.fixed {
position: fixed;
border: solid;
border-color: black;
padding: 10px;
background-color: yellow;
font-size: 2rem;
font-weight: bold;
top: 15rem;
left: 2rem;
}

.relative {
position: relative;
border: solid;
border-color: black;
top: 300px;
left: 500px;
display: inline-block;
padding: 10px;
background-color: lightgreen;
font-size: 2rem;
font-weight: bold;
}

.absolute {
position: absolute;
border: solid;
border-color: black;
top: 300px;
right: 400px;
padding: 10px;
background-color: lightblue;
font-size: 2rem;
font-weight: bold;
}

.sticky {
position: sticky;
border: solid;
border-color: black;
padding: 10px;
background-color: lightpink;
font-size: 2rem;
font-weight: bold;
top: 50px;
left: 500px;
padding: 20px;
display: inline-block;
}

.static {
position: static;
border: solid;
border-color: black;
margin-top: 300px;
margin-left: 700px;
padding: 10px;
background-color: lightpink;
font-size: 2rem;
font-weight: bold;
display: inline-block;
}

.parentrelative {
position: relative;
border: solid;
border-color: black;
background-color: lightblue;
font-size: 2rem;
font-weight: bold;
display: inline-block;
padding: 50px;
}

.childabsolute {
position: absolute;
background-color: lightblue;
font-size: 20px;
font-weight: bold;
display: inline-block;
border: solid;
border-color: black;
background-color: fuchsia;
white-space: nowrap;
top: 90px;
right: 40px;
}

.parentfixed {
position: fixed;
border: solid;
border-color: black;
padding: 50px;
display: inline-block;
background-color: lightblue;
font-size: 2rem;
font-weight: bold;
display: inline-block;
padding: 40px;
top: 50px;
left: 800px;
}

.childabsoluteinfixed {
position: absolute;
background-color: aquamarine;
border: solid;
border-color: black;
font-weight: bold;
font-size: 20px;
}< /code>




css position




position fixed
position relative
position absolute
position sticky
position static
parent position relative
position absolute inside position relative

parent position fixed
position absolute inside postion fixed

Я не знал, что мне нужно попробовать, я хочу, чтобы он придерживался в верхней части 50px

Подробнее здесь: https://stackoverflow.com/questions/796 ... its-positi