【发布时间】：2020-10-07 03:07:27
【问题描述】：
这是我的 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 中使用 display:inline 设置标题项时，我的粘性导航才会起作用？如果我删除该属性，粘性导航将不再起作用。
我正在学习HTML和CSS，非常感谢您的支持！
【问题讨论】：
-
因为您正在更改
sticky元素的 包含块 实际上是什么。 developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block
标签： html css css-position sticky