使用 Tailwind CSS 将 Div 置于另一个 Div 之上
如何让第二个内部 div 位于第一个内部 div（地图）之上？尽管使用相对和绝对定位，我还是无法弄清楚这一点。我正在使用 React 和 Tailwind CSS。相反，第二个内部 div 当前遵循图像流并位于第一个子 div 下方。
<div className="relative w-full h-screen">
<div className="bg-green-400 w-full h-full z-0">
<p className="italic text-bold bd-red-100 font-serif">Map</p>
</div>
<div className="absolute z-50">
<p className="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
Dig*_*jay 36
这是我根据您的查询创建的Tailwind 播放代码。我调整了高度和宽度以获得正确的视觉效果。
<div class="w-full h-screen bg-gray-200 flex justify-center items-center">
<div class="bg-gray-400 w-96 h-96 relative z-0">
<p class="italic text-bold bd-red-100 font-serif">Map</p>
<div class="absolute inset-0 flex justify-center items-center z-10">
<p class="text-2xl font-bold">This should be on top of the map</p>
</div>
</div>
</div>
我想进一步扩展@Digvijay 的答案以提供扩展的解释，其中包括
1.Logic
2.Responsive Sidebar
3.Responsive Sidebar with hamburger menu
你必须与之合作relative absolute并z-index使其发挥作用。
1、逻辑：
父级relative的z-index值小于absolute将用于导航栏的子级 div。
代码：
<div class="h-screen relative z-0 flex bg-gray-500">
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
输出：
代码链接：顺风玩
2.响应式侧边栏
如果您的目标是构建responsive sidebar仅与 重叠mobile screen但在 中是普通 div 的内容，large screen请遵循以下代码。
代码：
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
代码链接：顺风玩
大型设备中的输出：
较小设备中的输出：
3. 使用汉堡菜单切换移动导航栏
大型设备上的输出
小型设备中的输出hamburger menu
当点击时hamburger menu
代码：
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl pl-24 md:p-0 main_content">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>
| 归档时间： |
|
| 查看次数： |
52593 次 |
| 最近记录： |