如何使用Tailwind CSS不重叠组件

Question

我用一个简单的css类创建了一个名为Header的组件：

<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>

在主页组件I注册了标题，但它与主页重叠：

<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('@/components/Header.vue')
}
}
</script>

Hello落后了，即使在Home组件中包含block class也不起作用。有人能帮忙吗？

Answer 1

有很多方法可以实现这一点，但在现有代码的基础上，您可以：

1. 将top-0类添加到标头中。这将确保现在位于fixed的标头将粘贴到视口的顶部。

2. 在容器中添加一个与页眉高度相等的顶部填充类(例如pt-16(。

这里有一个现场演示供您参考。

Answer 2

由于组件的高度和自动伸缩高度，组件相互重叠，因此删除高度

删除cssh-16