为什么我的粘性导航仅在标题设置为内联时才起作用?

本文介绍了为什么我的粘性导航仅在标题设置为内联时才起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！这是我的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元素不再存在一样(这是一个简化的解释，实际上是).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 complex).您的代码就像没有标题一样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一起使用? 来自规范:在您的情况下，我们位于块格式上下文中，因此In your case we are inside a Block Formatting Context so还有相对于相对，除了相对于最接近的祖先滚动容器的滚动端口(由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. 这篇关于为什么我的粘性导航仅在标题设置为内联时才起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！