html - 为什么我的粘性导航仅在标题设置为内联时才有效？-6ren

html - 为什么我的粘性导航仅在标题设置为内联时才有效？

转载作者：行者123 更新时间：2023-12-04 15:25:09

这是我的 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>

我仍然不明白为什么我的粘性导航只有在我使用 display:inline 在 HTML 中设置标题项时才有效？如果我删除该属性，粘性导航将不再起作用。

我在学习HTML和CSS方面遇到了困难，非常感谢您的支持!

最佳答案

您找到了一个可以强制其工作的 hack。当使用 inline 时，你将在 inline level 元素中有 block 级元素，这是 invalid 并且它就像 inline 元素不再存在(这是一个简化的解释，实际上它是有点复杂¹)。

你的代码就像没有标题一样:

.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 将不起作用。它需要直接放在你体内有长内容的地方。

使用header时，加border理解问题:

.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 bottom:0 doesn't work with position:sticky?

¹来自 the specification :

The containing block of a static, relative, or sticky box is as defined by its formatting context.

在你的例子中，我们在 block 格式化上下文中，所以

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 - 为什么我的粘性导航仅在标题设置为内联时才有效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62426596/

文章推荐： puppeteer-sharp - IIS 中的 PuppeteerSharp

文章推荐： oracle - 从 oracle 转储文件中导入特定表？

文章推荐： LaTeX 环境中的 Vim 操作

文章推荐： python - 使用 nx.to_numpy_array 时邻接矩阵中的有序节点

javascript - 仅当数组包含奇数个项目时，删除动态填充的
才有效
项目实例:http://jsfiddle.net/k3buckuc/ enterItem = [] itemNumber = 0 // mark item as checked and add del
javascript - 仅当添加警报时，从视频获取图像并添加到 Canvas 才有效
我正在尝试为每个视频将图像设置到 Canvas 上。我循环遍历 FileID 数组，然后尝试从相应的视频中获取图像并将其添加到 Canvas 上。如果在 drawImage 函数之前添加警报，则以下
c - 仅当我将分隔符放在最后一项之后时，使用 strtok 才有效
所以我尝试基于 stdinput 打开和读取文件。我使用 strtok 来解析输入，以便用户可以输入多个文件。我已将分隔符设置为空格。 int main(const int argc, const
java - 仅当在 while 循环中调用函数时，将文件发送到 blob 才有效
我有正在尝试修改的 Azure blob 示例代码。但是，uploadFile 函数仅当处于 switch case 的 while 循环中时才起作用。如果我将其从循环中取出，它会创建容器但无法上传文
javascript - 仅当 div 在表格内时显示/ block 才有效
我有两个 div 想要交替隐藏/显示，当我将这两个 div 放在表格中但当它们不在表格中时我的代码工作正常，但我不想将它们放在一些 IE 问题的表格，这是我的代码 view more f
python - 仅当在单独的文件中给出转换命令时，将 HTML 转换为 PDF 才有效
我想用我编写的一个小 Python 程序生成发票。我希望它首先将发票输出为 HTML 文件，然后将其转换为 PDF。目前我的代码正在根据需要创建 HTML 文档，但它正在输出一个空白的 PDF 文件:
javascript - 仅当您不在当前页面上时，使用 jQuery 滚动到 anchor 才有效
问题是，当我单击同一页面上具有主题标签的链接时，动画滚动不起作用。动画滚动仅在您不在当前页面时才起作用。网址看起来像这样: website.com/about#people， website.com
Android:仅当我立即启动 App 时，Boot Complete 才有效
我正在尝试在我的应用程序中重置警报并使用接收器来获取 onBootCompleted。为了查看是否收到了 Intent ，我正在使用 toast 。仅当我立即打开应用程序时才会出现 toast 。否则
windows - 系统与用户 PATH 环境变量...仅当我将路径添加到用户 PATH 时，winmerge 才有效
如果我将 C:\Program Files (x86)\WinMerge 添加到用户 PATH 变量(通过右键单击计算机 -> 高级系统设置 -> 环境变量)，一旦我打开一个新的 cmd shell，
javascript - Angular - 仅当您单击 div 的特定区域时，div 上的 ng-click 才有效
我正在尝试创建一个具有一堆禁用字段的 div。单击 div 中的任意位置即可启用它们。我发现单击 div 中的任意位置都会导致 ng-click 被触发，而单击禁用的下拉列表似乎不会触发 ng-cl

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 为什么我的粘性导航仅在标题设置为内联时才有效？