How to not overlap components using Tailwind CSS?

Question

I created a component named Header with a simple css class:

<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>

In Home component I registred Header but it is overlapping the home:

<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>

The Hello is behind, even including block class in Home component is not worked. Anyone can helped?

Answer 1

There are may ways you could achieve this, but building on the code you already have, you could:

1. Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.

2. Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.

Here's a live demo for your reference.

Answer 2

overlapping component each others because of height of your component and in flex height taking automaticly so remove your height

remove css h-16