英文:
sticky position doesn't work but work in section
问题
当我将粘性定位应用于横幅1和横幅2时，它不起作用，但当我将其应用于包含这两者的部分时，它起作用，但我不想将其放在部分上，而是放在横幅1和横幅2的div中。
我使用Tailwind而不是CSS。
<section class="flex align-center justify-between items-center">
<!-- 横幅1 名称 -->
<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>
<!-- 欢迎消息 -->
<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! 👋🏼
</div>
<!-- 横幅2 联系方式 -->
<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>
</section>
英文:
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">
<!-- Banner 1 Name -->
<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! 👋🏼</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>
</section>
`
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! 👋🏼</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! 👋🏼</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>
<!-- 结束代码段 -->
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: 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;
}
<!-- language: lang-html -->
<div class="scrollable-container">
<div class="banner banner1">
<h1>Banner 1</h1>
</div>
<div class="welcome-message">
<h2>Bienvenue! 👋🏼</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! 👋🏼</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>
</section>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论