为什么我的粘性导航仅在 header 设置为内联时才有效？
Why my sticky navigation only works when my header is set to be inline?
这是我的 HTML 文件：
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
header {
display: inline;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" href="tes.css">
</head>
<body>
<header>
<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>
</body>
</html>
我仍然不明白为什么我的粘性导航只有在我将 HTML 中的 header 项设置为 display:inline 时才有效？如果我删除 属性，粘性导航将不再起作用。
我在学习HTML和CSS，非常感谢您的支持！
您找到了一个可以强制其工作的破解程序。当使用 inline 时，您将在 无效 的内联级元素中包含块级元素，就像内联元素不再存在一样（这是一个简化的解释，实际上它是有点复杂1).
你的代码就像没有 header:
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}
<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>
如果将 Sticky 包裹在另一个容器中，它就无法工作。它需要直接放在你的 body 里面，那里有很长的内容。
使用header时，加边框理解问题：
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
header {
border:5px solid red;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}
<header>
<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>
您的元素没有空间变粘，因为它已经在其容器的底部边缘。
相关问题：
Why position:sticky is not working when the element is wrapped inside another one?
Why bottom:0 doesn't work with position:sticky?
The containing block of a static, relative, or sticky box is as defined by its formatting context.
在你的例子中，我们在块格式化上下文中，所以
the containing block is formed by the content edge of the nearest block container ancestor box. ref
和
sticky
Identical to relative, except that its offsets are automatically adjusted in reference to the nearest ancestor scroll container’s scrollport (as modified by the inset properties) in whichever axes the inset properties are not both auto, to try to keep the box in view within its containing block as the user scrolls. ref
这是我的 HTML 文件：
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
header {
display: inline;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet" href="tes.css">
</head>
<body>
<header>
<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>
</body>
</html>
我仍然不明白为什么我的粘性导航只有在我将 HTML 中的 header 项设置为 display:inline 时才有效？如果我删除 属性，粘性导航将不再起作用。
我在学习HTML和CSS，非常感谢您的支持！
您找到了一个可以强制其工作的破解程序。当使用 inline 时，您将在 无效 的内联级元素中包含块级元素，就像内联元素不再存在一样（这是一个简化的解释，实际上它是有点复杂1).
你的代码就像没有 header:
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}
<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>
如果将 Sticky 包裹在另一个容器中，它就无法工作。它需要直接放在你的 body 里面，那里有很长的内容。
使用header时，加边框理解问题：
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00a8ec;
text-align: center;
color: white;
}
header {
border:5px solid red;
}
nav {
background-color: #00b2a6;
padding: 5px;
position: sticky;
top: 0;
}
footer {
padding: 20px;
color: white;
background-color: #00b2a6;
text-align: center;
font-weight: bold;
}
<header>
<div class="jumbotron">
<h1>TITLE</h1>
<p>DESCRIPTION</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>
<main>
<div id="content">
<pre>Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
Hahahaha
</pre>
</div>
<footer>
<p>FOOTER</p>
</footer>
您的元素没有空间变粘，因为它已经在其容器的底部边缘。
相关问题：
Why position:sticky is not working when the element is wrapped inside another one?
Why bottom:0 doesn't work with position:sticky?
The containing block of a static, relative, or sticky box is as defined by its formatting context.
在你的例子中，我们在块格式化上下文中，所以
the containing block is formed by the content edge of the nearest block container ancestor box. ref
和
sticky
Identical to relative, except that its offsets are automatically adjusted in reference to the nearest ancestor scroll container’s scrollport (as modified by the inset properties) in whichever axes the inset properties are not both auto, to try to keep the box in view within its containing block as the user scrolls. ref