Простые CSS, чтобы сохранить навигацию на вершине страницы [дублировать] ⇐ CSS

[Anonymous]

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

html,
body {
height: 100%;
}

#root {
min-height: 100%;
display: flex;
flex-direction: column;
}

header {
position: absolute; /* To pull the header out of the document flow */
}

main {
flex: 1;
}


Document

Let's say h1 and nav is placed within header tag and this would look like below:


What I want to achieve is keeping the nav tag on top of the page while the h1 tag is being scrolled as usual:


I've tried adding position: sticky; and top: 0;, but it doesn't seem to be working as the nav tag is placed within the TAG LEAGE. Или можно решить только с простым CSS?

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

html,
body {
height: 100%;
}

body {
margin: 0;
}

#root {
min-height: 100%;
display: flex;
flex-direction: column;
}

header {
position: absolute; /* To pull the header out of the document flow */
left: 0;
right: 0;
}

header h1 {
text-align: center;
}

nav {
margin: 0 auto;
position: sticky;
top: 0;
}

nav > ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}

nav > ul li {
margin: 0 10px;
}

nav > ul li a {
color: #000000;
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1px;
}

nav > ul li a:hover {
color: #bd8b4f;
}

main {
flex: 1;
min-height: 1500px;
}

footer {
padding: 40px 0;
color: #ffffff;
background-color: #683d29;
text-align: center;
}

footer > div a {
color: #ffffff;
text-decoration: none;
}

footer > div a:hover {
color: #683d29;
}< /code>






Document




Test Page

[list]
[*]
[url=#]Nav[/url]

[*]
[url=#]Nav[/url]

[*]
[url=#]Nav[/url]

[*]
[url=#]Nav[/url]

[*]
[url=#]Nav[/url]

[/list]




Copyright 2022. [url=#]Test[/url] All rights reserved.

Подробнее здесь: https://stackoverflow.com/questions/747 ... f-the-page