问题

我正在处理一个网站，并遇到了一个小问题。一切都很正常，但当粘性导航栏位于相对定位的元素（如div-block）之上时，汉堡图标停止工作或无法点击。我正在使用Tailwindcss和一个非常简单的js脚本。希望有人可以帮助我解决这个问题。

以下是导航栏的代码：

<!-- 汉堡图标菜单栏 -->
<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow">
    <button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
        <span>
            <span class="block bg-black w-8 h-0.5 mb-1 "></span>
            <span class="block bg-black w-8 h-0.5 my-1"></span>
            <span class="block bg-black w-8 h-0.5 mt-1"></span>
        </span>
    </button>
    <a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif" href="#">Jetzt anfragen!</a>
</div>

<div class="navbar-menu relative z-50 hidden">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
    <!-- 移动端侧边菜单 -->
    <nav class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
        <div class="flex items-center mb-8">
            <button class="navbar-close h-8">
                <span class="block">
                    <span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
                    <span class="block opacity-0 bg-black w-8 h-0.5"></span>
                    <span class="block bg-black w-8 h-0.5 -rotate-45 "></span>
                </span>
            </button>
        </div>
        <div>
            <ul class="flex flex-col justify-center items-center">
                <li class="mb-1">
                    <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Home</a>
                </li>
                <li class="mb-1">
                    <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">About Us</a>
                </li>
                <li class="mb-1">
                    <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Services</a>
                </li>
                <li class="mb-1">
                    <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Pricing</a>
                </li>
                <li class="mb-1">
                    <a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Contact</a>
                </li>
            </ul>
        </div>
        <div class="mt-20">
            <p class="my-4 text-xs text-center text-gray-800">
                <span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
                <span class="block my-3"><a href="mailto:info@xyz.de?subject=Hochzeitsplanner gesucht">Email: info@xyz.de</a></span>
            </p>
            <div class="pt-6 ">
                <a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md" href="#">Jetzt anfragen!</a>
            </div>
        </div>
    </nav>
</div>

<!-- 头部 -->
<header class="flex flex-col justify-center items-center bg-white">
    <div>
        <img class="w-52 h-52 lg:w-80 lg:h-80" src="./assets/img/xyz.png" alt="Logo">
    </div>
    <div class="flex justify-center gap-8 pt-4 pb-8">
        <a href="#"><img src="./assets/img/facebook.png" alt="Facebook" height="20px" width="20px"></a>
        <a href="#"><img src="./assets/img/twitter.png" alt="Twitter" height="20px" width="20px"></a>
        <a href="#"><img src="./assets/img/instagram.png" alt="Instagram" height="20px" width="20px"></a>
        <a href="#"><img src="./assets/img/pinterest.png" alt="Pinterest" height="20px" width="20px"></a>
    </div>
</header>

<!-- 桌面菜单 -->
<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow">
    <ul class=" absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
        <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Home</a></li>
        <li class="text-gray-300"></li>
        <li><a class="text-sm text-blue-600 font-bold" href="#">About Us</a></li>
        <li class="text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
        </li>
        <li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>
        <li class="text-gray-300">
           

<details>
<summary>英文:</summary>

I am working on a website and ran into a little problem. Everything works nice but the hamburger icon stops to work or is not clickable when the sticky navbar is above a relative positioned element like a div-block. I am using Tailwindcss and a very simple js script. I hope somebody can help me with that.

Here the navbar code:

<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow">
<button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
<span>
<span class="block bg-black w-8 h-0.5 mb-1 "></span>
<span class="block bg-black w-8 h-0.5 my-1"></span>
<span class="block bg-black w-8 h-0.5 mt-1"></span>
</span>
</button>
<a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif"
href="#">Jetzt anfragen!</a>
</div>

&lt;div class=&quot;navbar-menu relative z-50 hidden&quot;&gt;
&lt;div class=&quot;navbar-backdrop fixed inset-0 bg-gray-800 opacity-25&quot;&gt;&lt;/div&gt;
&lt;!--mobile side menu--&gt;
&lt;nav
class=&quot;fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto&quot;&gt;
&lt;div class=&quot;flex items-center mb-8&quot;&gt;
&lt;button class=&quot;navbar-close h-8&quot;&gt;
&lt;span class=&quot;block&quot;&gt;
&lt;span class=&quot;block bg-black w-8 h-0.5 rotate-45 translate-y-1&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;block opacity-0 bg-black w-8 h-0.5&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;block bg-black w-8 h-0.5 -rotate-45 &quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;ul class=&quot;flex flex-col justify-center items-center&quot;&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot;
href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot;
href=&quot;#&quot;&gt;About Us&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot;
href=&quot;#&quot;&gt;Services&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot;
href=&quot;#&quot;&gt;Pricing&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot;
href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-20&quot;&gt;
&lt;p class=&quot;my-4 text-xs text-center text-gray-800&quot;&gt;
&lt;span class=&quot;block my-3&quot;&gt;&lt;a href=&quot;tel:+12344567&quot;&gt;Tel.: +12345678&lt;/a&gt;&lt;/span&gt;
&lt;span class=&quot;block my-3&quot;&gt;&lt;a
href=&quot;mailto:info@xyz.de?subject=Hochzeitsplanner gesucht&quot;&gt;Email:
info@xyz.de&lt;/a&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;div class=&quot;pt-6 &quot;&gt;
&lt;a class=&quot;block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md&quot;
href=&quot;#&quot;&gt;Jetzt anfragen!&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;!---- HEADER--&gt;
&lt;header class=&quot;flex flex-col justify-center items-center bg-white&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;img class=&quot; w-52 h-52 lg:w-80 lg:h-80&quot; src=&quot;./assets/img/xyz.png&quot;
alt=&quot;Logo&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;flex justify-center gap-8 pt-4 pb-8&quot;&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./assets/img/facebook.png&quot; alt=&quot;Facebook&quot; height=&quot;20px&quot; width=&quot;20px&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./assets/img/twitter.png&quot; alt=&quot;Twitter&quot; height=&quot;20px&quot; width=&quot;20px&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./assets/img/instagram.png&quot; alt=&quot;Instagram&quot; height=&quot;20px&quot; width=&quot;20px&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./assets/img/pinterest.png&quot; alt=&quot;Pinterest&quot; height=&quot;20px&quot; width=&quot;20px&quot;&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/header&gt;

<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow">

    &lt;ul
class=&quot; absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6&quot;&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-gray-400 hover:text-gray-500&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;text-gray-300&quot;&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-blue-600 font-bold&quot; href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;text-gray-300&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; class=&quot;w-4 h-4 current-fill&quot;
viewBox=&quot;0 0 24 24&quot;&gt;
&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot;
d=&quot;M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z&quot; /&gt;
&lt;/svg&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-gray-400 hover:text-gray-500&quot; href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;text-gray-300&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; class=&quot;w-4 h-4 current-fill&quot;
viewBox=&quot;0 0 24 24&quot;&gt;
&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot;
d=&quot;M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z&quot; /&gt;
&lt;/svg&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-gray-400 hover:text-gray-500&quot; href=&quot;#&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;text-gray-300&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; class=&quot;w-4 h-4 current-fill&quot;
viewBox=&quot;0 0 24 24&quot;&gt;
&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot;
d=&quot;M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z&quot; /&gt;
&lt;/svg&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-gray-400 hover:text-gray-500&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;a class=&quot;hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 bg-gray-200 hover:bg-gray-100 text-sm text-gray-900 font-bold  rounded-sm transition duration-200&quot;
href=&quot;#&quot;&gt;Jetzt anfragen!&lt;/a&gt;
&lt;a class=&quot;hidden lg:inline-block py-2 px-6 bg-blue-500 hover:bg-blue-600 text-sm text-white font-bold rounded-xl transition duration-200&quot;
href=&quot;#&quot;&gt;Sign up&lt;/a&gt;
&lt;/nav&gt;


And here&#39;s the js script:

document.addEventListener('DOMContentLoaded', function () {
// open
const burger = document.querySelectorAll('.navbar-burger');
const menu = document.querySelectorAll('.navbar-menu');

        if (burger.length &amp;&amp; menu.length) {
for (var i = 0; i &lt; burger.length; i++) {
burger[i].addEventListener(&#39;click&#39;, function () {
for (var j = 0; j &lt; menu.length; j++) {
menu[j].classList.toggle(&#39;hidden&#39;);
}
});
}
}
// close
const close = document.querySelectorAll(&#39;.navbar-close&#39;);
const backdrop = document.querySelectorAll(&#39;.navbar-backdrop&#39;);
if (close.length) {
for (var i = 0; i &lt; close.length; i++) {
close[i].addEventListener(&#39;click&#39;, function () {
for (var j = 0; j &lt; menu.length; j++) {
menu[j].classList.toggle(&#39;hidden&#39;);
}
});
}
}
if (backdrop.length) {
for (var i = 0; i &lt; backdrop.length; i++) {
backdrop[i].addEventListener(&#39;click&#39;, function () {
for (var j = 0; j &lt; menu.length; j++) {
menu[j].classList.toggle(&#39;hidden&#39;);
}
});
}
}
});


I tried different z-values but without any effect. It works once I remove the relative class from one of the div blocks, but I definitely need that to position some elements. Something about the overlapping creates problems.
</details>
# 答案1
**得分**: 0
考虑对具有`position: sticky`的元素应用正值的`z-index`，以使它们在堆叠顺序中显示在之后出现的任何`position: relative`元素之上。例如，我已经向具有`sticky`的两个元素添加了`z-50`，并根据您的描述添加了一个半透明的`relative`定位的`&lt;div&gt;`，以演示这样可以解决问题。
```html
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
document.addEventListener('DOMContentLoaded', function() {
// open
const burger = document.querySelectorAll('.navbar-burger');
const menu = document.querySelectorAll('.navbar-menu');
if (burger.length && menu.length) {
for (var i = 0; i < burger.length; i++) {
burger[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
// close
const close = document.querySelectorAll('.navbar-close');
const backdrop = document.querySelectorAll('.navbar-backdrop');
if (close.length) {
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
if (backdrop.length) {
for (var i = 0; i < backdrop.length; i++) {
backdrop[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
});
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow z-50">
<button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
<span>
<span class="block bg-black w-8 h-0.5 mb-1"></span>
<span class="block bg-black w-8 h-0.5 my-1"></span>
<span class="block bg-black w-8 h-0.5 mt-1"></span>
</span>
</button>
<a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif" href="#">Jetzt anfragen!</a>
</div>
<div class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
<!--mobile side menu-->
<nav class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
<div class="flex items-center mb-8">
<button class="navbar-close h-8">
<span class="block">
<span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
<span class="block opacity-0 bg-black w-8 h-0.5"></span>
<span class="block bg-black w-8 h-0.5 -rotate-45"></span>
</span>
</button>
</div>
<div>
<ul class="flex flex-col justify-center items-center">
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Home</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">About Us</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Services</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Pricing</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Contact</a>
</li>
</ul>
</div>
<div class="mt-20">
<p class="my-4 text-xs text-center text-gray-800">
<span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
<span class="block my-3"><a href="mailto:info@xyz.de?subject=Hochzeitsplanner gesucht">Email: info@xyz.de</a></span>
</p>
<div class="pt-6">
<a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md" href="#">Jetzt anfragen!</a>
</div>
</div>
</nav>
</div>
<!-- HEADER-->
<header class="flex flex-col justify-center items-center bg-white">
<div>
<img class="w-52 h-52 lg:w-80 lg:h-80" src="https://picsum.photos/1000/1000" alt="Logo" />
</div>
<div class="flex justify-center gap-8 pt-4 pb-8">
<a href="#"><img src="https://picsum.photos/20/20" alt="Facebook" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?" alt="Twitter" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?0" alt="Instagram" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?1" alt="Pinterest" height="20px" width="20px" /></a>
</div>
</header>
<!-- Desktop Menu -->
<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow z-50">
<ul class
<details>
<summary>英文:</summary>
Consider applying a positive `z-index` to the elements that have `position: sticky` so that they appear higher in the stacking order than any `position: relative` elements that appear afterwards in the source order. For example, I have added `z-50` to the two elements that have `sticky`, alongside a translucent `relative`-positioned `&lt;div&gt;` as per your description to demonstrate that this fixes the issue.
&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;
&lt;!-- language: lang-js --&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
// open
const burger = document.querySelectorAll(&#39;.navbar-burger&#39;);
const menu = document.querySelectorAll(&#39;.navbar-menu&#39;);
if (burger.length &amp;&amp; menu.length) {
for (var i = 0; i &lt; burger.length; i++) {
burger[i].addEventListener(&#39;click&#39;, function() {
for (var j = 0; j &lt; menu.length; j++) {
menu[j].classList.toggle(&#39;hidden&#39;);
}
});
}
}
// close
const close = document.querySelectorAll(&#39;.navbar-close&#39;);
const backdrop = document.querySelectorAll(&#39;.navbar-backdrop&#39;);
if (close.length) {
for (var i = 0; i &lt; close.length; i++) {
close[i].addEventListener(&#39;click&#39;, function() {
for (var j = 0; j &lt; menu.length; j++) {
menu[j].classList.toggle(&#39;hidden&#39;);
}
});
}
}
if (backdrop.length) {
for (var i = 0; i &lt; backdrop.length; i++) {
backdrop[i].addEventListener(&#39;click&#39;, function() {
for (var j = 0; j &lt; menu.length; j++) {
menu[j].classList.toggle(&#39;hidden&#39;);
}
});
}
}
});
&lt;!-- language: lang-html --&gt;
&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow z-50&quot;&gt;
&lt;button class=&quot;block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2&quot;&gt;
&lt;span&gt;
&lt;span class=&quot;block bg-black w-8 h-0.5 mb-1&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;block bg-black w-8 h-0.5 my-1&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;block bg-black w-8 h-0.5 mt-1&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/button&gt;
&lt;a class=&quot;block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif&quot; href=&quot;#&quot;&gt;Jetzt anfragen!&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;navbar-menu relative z-50 hidden&quot;&gt;
&lt;div class=&quot;navbar-backdrop fixed inset-0 bg-gray-800 opacity-25&quot;&gt;&lt;/div&gt;
&lt;!--mobile side menu--&gt;
&lt;nav class=&quot;fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto&quot;&gt;
&lt;div class=&quot;flex items-center mb-8&quot;&gt;
&lt;button class=&quot;navbar-close h-8&quot;&gt;
&lt;span class=&quot;block&quot;&gt;
&lt;span class=&quot;block bg-black w-8 h-0.5 rotate-45 translate-y-1&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;block opacity-0 bg-black w-8 h-0.5&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;block bg-black w-8 h-0.5 -rotate-45&quot;&gt;&lt;/span&gt;
&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;ul class=&quot;flex flex-col justify-center items-center&quot;&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot; href=&quot;#&quot;&gt;About Us&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot; href=&quot;#&quot;&gt;Services&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot; href=&quot;#&quot;&gt;Pricing&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;mb-1&quot;&gt;
&lt;a class=&quot;block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;mt-20&quot;&gt;
&lt;p class=&quot;my-4 text-xs text-center text-gray-800&quot;&gt;
&lt;span class=&quot;block my-3&quot;&gt;&lt;a href=&quot;tel:+12344567&quot;&gt;Tel.: +12345678&lt;/a&gt;&lt;/span&gt;
&lt;span class=&quot;block my-3&quot;&gt;&lt;a href=&quot;mailto:info@xyz.de?subject=Hochzeitsplanner gesucht&quot;&gt;Email: info@xyz.de&lt;/a&gt;&lt;/span&gt;
&lt;/p&gt;
&lt;div class=&quot;pt-6&quot;&gt;
&lt;a class=&quot;block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md&quot; href=&quot;#&quot;&gt;Jetzt anfragen!&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;!---- HEADER--&gt;
&lt;header class=&quot;flex flex-col justify-center items-center bg-white&quot;&gt;
&lt;div class=&quot;&quot;&gt;
&lt;img class=&quot;w-52 h-52 lg:w-80 lg:h-80&quot; src=&quot;https://picsum.photos/1000/1000&quot; alt=&quot;Logo&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;flex justify-center gap-8 pt-4 pb-8&quot;&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://picsum.photos/20/20&quot; alt=&quot;Facebook&quot; height=&quot;20px&quot; width=&quot;20px&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://picsum.photos/20/20?&quot; alt=&quot;Twitter&quot; height=&quot;20px&quot; width=&quot;20px&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://picsum.photos/20/20?0&quot; alt=&quot;Instagram&quot; height=&quot;20px&quot; width=&quot;20px&quot; /&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://picsum.photos/20/20?1&quot; alt=&quot;Pinterest&quot; height=&quot;20px&quot; width=&quot;20px&quot; /&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;!---Desktop Menu--&gt;
&lt;nav class=&quot;hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow z-50&quot;&gt;
&lt;ul class=&quot;absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6&quot;&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-gray-400 hover:text-gray-500&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;text-gray-300&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-blue-600 font-bold&quot; href=&quot;#&quot;&gt;About Us&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;text-gray-300&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; class=&quot;w-4 h-4 current-fill&quot; viewBox=&quot;0 0 24 24&quot;&gt;
&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z&quot; /&gt;
&lt;/svg&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-gray-400 hover:text-gray-500&quot; href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;text-gray-300&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; class=&quot;w-4 h-4 current-fill&quot; viewBox=&quot;0 0 24 24&quot;&gt;
&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z&quot; /&gt;
&lt;/svg&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-gray-400 hover:text-gray-500&quot; href=&quot;#&quot;&gt;Pricing&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;text-gray-300&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; class=&quot;w-4 h-4 current-fill&quot; viewBox=&quot;0 0 24 24&quot;&gt;
&lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z&quot; /&gt;
&lt;/svg&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;text-sm text-gray-400 hover:text-gray-500&quot; href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;a class=&quot;hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 bg-gray-200 hover:bg-gray-100 text-sm text-gray-900 font-bold rounded-sm transition duration-200&quot; href=&quot;#&quot;&gt;Jetzt anfragen!&lt;/a&gt;
&lt;a class=&quot;hidden lg:inline-block py-2 px-6 bg-blue-500 hover:bg-blue-600 text-sm text-white font-bold rounded-xl transition duration-200&quot; href=&quot;#&quot;&gt;Sign up&lt;/a&gt;
&lt;/nav&gt;
&lt;div class=&quot;h-[200vh] relative bg-red-500/50&quot;&gt;
&lt;!-- end snippet --&gt;
</details>

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

汉堡图标在相对定位元素之上不可点击。

问题

Korean characters reappear in text <input> after input value cleared and new KR characters typed

如何在 Chrome 浏览器中使用 iframe 标签显示 PDF 文件。

“绝对定位的 div 不在相对定位的 div 指定位置内”

Bunny.net CDN令牌认证无法正常工作（针对.m3u8文件）

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 在上下文菜单中以大文本形式打开

发表评论