为什么我的粘性导航仅在标题设置为内联时才起作用? [英] Why my sticky navigation only works when my header is set to be inline?
问题描述
这是我的HTML文件:
This is my HTML file:
.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>我仍然不明白为什么只有在将display.inline设置为HTML的标题项时，粘性导航才会起作用?如果我删除该属性，则粘性导航将不再起作用.
I still do not understand why my sticky navigation will only work if I set the header item in HTML with display:inline ? If I remove that property, the sticky navigation will not work anymore.
我正在学习HTML和CSS，非常感谢您的支持！
I am in my way in learning HTML and CSS, thank you very much for your support!
推荐答案
您发现了一种可迫使其正常工作的黑客工具.当使用 inline 时，您将在inline level元素1中包含块级元素，该元素是 invalid ，就像inline元素不再存在一样(这是一个简化的解释，实际上是 1 ).
You find a hack to force it to work. When using inline you will have block level elements inside inline level element one which is invalid and it's like the inline element no more exist (this is a simplified explanation, in reality it's a bit more complex1).
您的代码就像没有标题一样
Your code is exactly like not having 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包裹在另一个容器中，它将无法正常工作.需要将其直接放置在内容丰富的体内.
Sticky won't work if you wrap it inside another container. It need to be directly placed inside your body where you have the long content .
使用标题时，请添加边框以了解该问题:
When using header, add border to understand the issue:
.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>您的元素没有粘性的空间，因为它已经在容器的底部边缘.
Your element has no room to become sticky because its already at the bottom edge of its container.
相关问题:
为什么在将元素包装在另一个元素中时position:sticky无法正常工作?
为什么bottom:0不能与position:sticky一起使用?
1 来自规范:
静态，相对或粘性框的包含块由其格式化上下文定义.
The containing block of a static, relative, or sticky box is as defined by its formatting context.
在您的情况下，我们位于块格式上下文中，因此
In your case we are inside a Block Formatting Context so
包含块由最近的块容器祖先框的内容边缘形成. 参考
the containing block is formed by the content edge of the nearest block container ancestor box. ref
还有
粘性
相对于相对，除了相对于最接近的祖先滚动容器的滚动端口(由inset属性修改)自动调整其偏移量之外，无论哪个轴上的inset属性都不都是自动的，尝试在用户滚动时将该框保持在其包含的框内. 参考
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
这篇关于为什么我的粘性导航仅在标题设置为内联时才起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
