html - Div 与另一个元素重叠,使其不可点击 tailwindcss
问题描述
我正在使用tailwindcss inn reactjs,它的div元素分为两部分,一是9-12,二是3-12。9-12 部分重叠导航栏一个元素,我可以单击该元素,但 3-12 部分重叠 3 个元素,即导航栏中的经验、项目和联系人,这是不可点击的。这是导航栏部分的代码:
<nav className="bg-gray-900 fixed w-full">
<div className="max-w-7xl mx-auto px-8">
<div className="flex items-center justify-between h-24">
<div className="w-full justify-between flex items-center">
<a className="flex-shrink-0" href="/">
<img
className="h-20 w-20 mt-4"
src={logo}
alt="Pradeep Anand"
/>
</a>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
About
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="100"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Experience
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="200"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Project
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Contact
</a>
</div>
</div>
</div>
<div className="block">
<div className="ml-4 flex items-center md:ml-6"></div>
</div>
<div className="-mr-2 flex md:hidden">
<button className="text-gray-800 dark:text-white hover:text-gray-300 inline-flex items-center justify-center p-2 rounded-md focus:outline-none">
<svg
width="20"
height="20"
fill="currentColor"
className="h-8 w-8"
viewBox="0 0 1792 1792"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
这是另一个组件的代码:
<div className="flex px-48 flex-wrap">
<div className="w-9/12 pt-32 pb-10">
<h2
className="text-2xl text-pink-600 intro"
data-aos="fade-up"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Hi, my name is
</h2>
<br />
<h1
className="text-8xl"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Pradeep
<br />
Anand
</h1>
<div
className="w-16 h-2 bg-pink-800 mt-3"
data-aos="fade-right"
data-aos-delay="300"
data-aos-anchor-placement="top-bottom"
/>
<button
className="my-28 px-6 py-4 transition ease-in duration-200 uppercase rounded-md hover:bg-pink-800 hover:bg-opacity-30 hover:text-white border-2 border-pink-900 focus:outline-none"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-bottom"
>
Get In Touch
</button>
</div>
<div
className="w-3/12 pt-48"
data-aos="fade-left"
data-aos-delay="800"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
<h3 className="text-sm text-pink-800 font-bold intro">
Introduction
</h3>
<h4 className="text-4xl py-4">
Software Developer by Profession. Web Dev by passion.
</h4>
<p>I'm a software engineer from India. I make things for web.</p>
</div>
</div>
解决方案
请向导航栏提供 z-index 以避免这种情况。因为它具有位置固定属性
推荐阅读
- google-chrome - vs代码启动时Google chrome无法打开
- c - 命令行和代码块之间的不同输出
- wordpress - Wordpress 自定义分类法和自定义帖子类型 - 分页不起作用
- python - 分离第一行数据集并重新分配给新矩阵 - python
- r - R中所有可能性的频率计数
- c - 在 C 中计算 txt 文件的一行中的字符数
- django - 如何在 django 的基于函数的视图中设置外键?
- java - 我的解释器语言似乎无法识别“+”符号并返回错误。我的代码怎么出错了?
- python - python中的多处理和多线程
- ruby-on-rails - 图像隐私:Base64 或匿名隐私