问题

我正在处理一个网站，并遇到了一个小问题。一切都很正常，但当粘性导航栏位于相对定位的元素（如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>

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

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

问题

如何使用JavaScript中的$.ajax保存zip二进制数据。

JS引擎如何与WebCore协作更新DOM树？

Node.js：如果传递的数据无效，应该拒绝并显示错误。

nth-child选择所有元素。

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

发表评论