问题

当我将粘性定位应用于横幅1和横幅2时，它不起作用，但当我将其应用于包含这两者的部分时，它起作用，但我不想将其放在部分上，而是放在横幅1和横幅2的div中。

我使用Tailwind而不是CSS。

&lt;section class=&quot;flex align-center justify-between items-center&quot;&gt;
    &lt;!-- 横幅1 名称 --&gt;
    &lt;div class=&quot;sticky top-0 z-50&quot;&gt;
        &lt;h1 class=&quot;text-neutral-950 my-10 mr-10 font-light text-lg md:text-5xl leading-10 border-y-4 border-r-4 py-3 pr-8 pl-32 rounded-r-xl border-current bg-sky-600 bg-opacity-80 backdrop-blur-sm&quot;&gt;
            Valentin Fiess
        &lt;/h1&gt;
    &lt;/div&gt;

    &lt;!-- 欢迎消息 --&gt;
    &lt;div id=&quot;welcome-message&quot; class=&quot;font-light animate__animated animate__tada animate__infinite animate__slower text-center text-red-400 text-xl md:text-6xl&quot;&gt;
        Bienvenue! &#128075;&#127996;
    &lt;/div&gt;

    &lt;!-- 横幅2 联系方式 --&gt;
    &lt;div class=&quot;flex justify-end align-center ml-10 my-10 border-y-4 border-l-4 py-3 pr-2 rounded-l-xl border-neutral-950 bg-sky-600 bg-opacity-80 backdrop-blur-sm sticky top-0 z-50&quot;&gt;
        &lt;a href=&quot;https://www.linkedin.com/in/valentin-fiess060502/&quot; target=&quot;_blank&quot; class=&quot;fab fa-linkedin mx-5 font-light&quot; style=&quot;color: neutral-950;&quot; title=&quot;Linkedin&quot;&gt;&lt;/a&gt;
        &lt;a href=&quot;https://github.com/ValMtp3&quot; target=&quot;_blank&quot; class=&quot;fa-brands fa-square-github mx-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;GitHub&quot;&gt;&lt;/a&gt;
        &lt;a href=&quot;mailto:valentin@epsi.fr&quot; target=&quot;_blank&quot; class=&quot;fa-solid fa-square-envelope mx-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;Mail&quot;&gt;&lt;/a&gt;
        &lt;a href=&quot;assets_index/CV Valentin.pdf&quot; target=&quot;_blank&quot; class=&quot;fa-solid fa-address-card ml-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;CV&quot;&gt;&lt;/a&gt;
    &lt;/div&gt;
&lt;/section&gt;

英文:

when I put a sticky postion on banner 1 and banner 2 it doesn't work but when I put it on the section encompassing the 2 it works, but I don't want to put it on the section but on the divs of banner 1 and banner 2.

i use tailwind and i haven't css

`
<section class="flex align-center justify-between items-center">

  &lt;!-- Banner 1 Name --&gt;
  &lt;div class=&quot;sticky top-0 z-50&quot;&gt;
    &lt;h1 class=&quot;text-neutral-950 my-10 mr-10 font-light text-lg md:text-5xl leading-10 border-y-4 border-r-4 py-3 pr-8 pl-32 rounded-r-xl border-current bg-sky-600 bg-opacity-80 backdrop-blur-sm&quot;&gt;
      Valentin Fiess
    &lt;/h1&gt;
  &lt;/div&gt;

  &lt;!-- Message bienvenue --&gt;
  &lt;div id=&quot;welcome-message&quot; class=&quot;font-light animate__animated animate__tada animate__infinite animate__slower text-center text-red-400 text-xl md:text-6xl&quot;&gt;Bienvenue! &#128075;&#127996;&lt;/div&gt;

  &lt;!-- Banner 2 contact --&gt;
  &lt;div class=&quot;flex justify-end align-center ml-10 my-10 border-y-4 border-l-4 py-3 pr-2 rounded-l-xl border-neutral-950 bg-sky-600 bg-opacity-80 backdrop-blur-sm sticky top-0 z-50&quot;&gt;
    &lt;a href=&quot;https://www.linkedin.com/in/valentin-fiess060502/&quot; target=&quot;_blank&quot; class=&quot;fab fa-linkedin mx-5 font-light&quot; style=&quot;color: neutral-950;&quot; title=&quot;Linkedin&quot;&gt;
    &lt;/a&gt;
    &lt;a href=&quot;https://github.com/ValMtp3&quot; target=&quot;_blank&quot; class=&quot;fa-brands fa-square-github mx-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;GitHub&quot;&gt;
    &lt;/a&gt;
    &lt;a href=&quot;mailto:valentin@epsi.fr&quot; target=&quot;_blank&quot; class=&quot;fa-solid fa-square-envelope mx-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;Mail&quot;&gt;
    &lt;/a&gt;
    &lt;a href=&quot;assets_index/CV Valentin.pdf&quot; target=&quot;_blank&quot; class=&quot;fa-solid fa-address-card ml-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;CV&quot;&gt;
    &lt;/a&gt;
  &lt;/div&gt;

&lt;/section&gt;

i would the banner 1 and banner 2 is always sticky at the top but not the welcome message

答案1

得分: 1

<!-- 开始代码段: JavaScript 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-css -->

.scrollable-container {
  overflow: auto;
  max-height: 100vh;
}

.banner {
  position: sticky;
  top: 0;
  z-index: 50;
}

.banner1 {
  background-color: #f1f1f1;
  padding: 10px;
}

.banner2 {
  background-color: #e5e5e5;
  padding: 10px;
}

.welcome-message {
  text-align: center;
  color: red;
  font-size: 24px;
}

<!-- 语言: lang-html -->

<div class="scrollable-container">
  <div class="banner banner1">
    <h1>Banner 1</h1>
  </div>

  <div class="welcome-message">
    <h2>Bienvenue! &#128075;&#127996;</h2>
  </div>

  <div class="banner banner2">
    <h1>Banner 2</h1>
  </div>
  <div class="sticky top-0 z-50">
    <h1 class="text-neutral-950 my-10 mr-10 font-light text-lg md:text-5xl leading-10 border-y-4 border-r-4 py-3 pr-8 pl-32 rounded-r-xl border-current bg-sky-600 bg-opacity-80 backdrop-blur-sm">
      Valentin Fiess
    </h1>
  </div>

  <!-- Message bienvenue -->
  <div id="welcome-message" class="font-light animate__animated animate__tada animate__infinite animate__slower text-center text-red-400 text-xl md:text-6xl">Bienvenue! &#128075;&#127996;</div>

  <!-- Banner 2 contact -->
  <div class="flex justify-end align-center ml-10 my-10 border-y-4 border-l-4 py-3 pr-2 rounded-l-xl border-neutral-950 bg-sky-600 bg-opacity-80 backdrop-blur-sm sticky top-0 z-50">
    <a href="https://www.linkedin.com/in/valentin-fiess060502/" target="_blank" class="fab fa-linkedin mx-5 font-light" style="color: neutral-950;" title="Linkedin">
    </a>
    <a href="https://github.com/ValMtp3" target="_blank" class="fa-brands fa-square-github mx-5" style="color: neutral-950;" title="GitHub">
    </a>
    <a href="mailto:valentin@epsi.fr" target="_blank" class="fa-solid fa-square-envelope mx-5" style="color: neutral-950;" title="Mail">
    </a>
    <a href="assets_index/CV Valentin.pdf" target="_blank" class="fa-solid fa-address-card ml-5" style="color: neutral-950;" title="CV">
    </a>
  </div>
</div>

<!-- 结束代码段 -->

英文:

    .scrollable-container {
overflow: auto;
max-height: 100vh;
}
.banner {
position: sticky;
top: 0;
z-index: 50;
}
.banner1 {
background-color: #f1f1f1;
padding: 10px;
}
.banner2 {
background-color: #e5e5e5;
padding: 10px;
}
.welcome-message {
text-align: center;
color: red;
font-size: 24px;
}

 &lt;div class=&quot;scrollable-container&quot;&gt;
&lt;div class=&quot;banner banner1&quot;&gt;
&lt;h1&gt;Banner 1&lt;/h1&gt;
&lt;/div&gt;
&lt;div class=&quot;welcome-message&quot;&gt;
&lt;h2&gt;Bienvenue! &#128075;&#127996;&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;banner banner2&quot;&gt;
&lt;h1&gt;Banner 2&lt;/h1&gt;
&lt;/div&gt;
&lt;div class=&quot;sticky top-0 z-50&quot;&gt;
&lt;h1 class=&quot;text-neutral-950 my-10 mr-10 font-light text-lg md:text-5xl leading-10 border-y-4 border-r-4 py-3 pr-8 pl-32 rounded-r-xl border-current bg-sky-600 bg-opacity-80 backdrop-blur-sm&quot;&gt;
Valentin Fiess
&lt;/h1&gt;
&lt;/div&gt;
&lt;!-- Message bienvenue --&gt;
&lt;div id=&quot;welcome-message&quot; class=&quot;font-light animate__animated animate__tada animate__infinite animate__slower text-center text-red-400 text-xl md:text-6xl&quot;&gt;Bienvenue! &#128075;&#127996;&lt;/div&gt;
&lt;!-- Banner 2 contact --&gt;
&lt;div class=&quot;flex justify-end align-center ml-10 my-10 border-y-4 border-l-4 py-3 pr-2 rounded-l-xl border-neutral-950 bg-sky-600 bg-opacity-80 backdrop-blur-sm sticky top-0 z-50&quot;&gt;
&lt;a href=&quot;https://www.linkedin.com/in/valentin-fiess060502/&quot; target=&quot;_blank&quot; class=&quot;fab fa-linkedin mx-5 font-light&quot; style=&quot;color: neutral-950;&quot; title=&quot;Linkedin&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;https://github.com/ValMtp3&quot; target=&quot;_blank&quot; class=&quot;fa-brands fa-square-github mx-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;GitHub&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;mailto:valentin@epsi.fr&quot; target=&quot;_blank&quot; class=&quot;fa-solid fa-square-envelope mx-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;Mail&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;assets_index/CV Valentin.pdf&quot; target=&quot;_blank&quot; class=&quot;fa-solid fa-address-card ml-5&quot; style=&quot;color: neutral-950;&quot; title=&quot;CV&quot;&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

粘性定位在整个页面中不起作用，但在某个部分中起作用。

问题

答案1

“Flex-grow 不会改变元素的状态”

在Bootstrap中的链接下划线问题

表格中的最大高度过渡

在文本悬停时，使用兄弟组合器将背景图像的宽度设置为100%。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论