Div on top of another with Tailwind CSS

Question

How do I get the second inner div to be on top of the first inner div (map)? I can't figure this out, despite using relative & absolute positioning. I'm using React & Tailwind CSS. Instead, the second inner div currently follows the flow of the image and is positioned below the first children 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>

Digvijay · Accepted Answer

Here's a Tailwind Play Code I created based on your query. I have tweaked height and width for proper visual.

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

krishnaacharyaa · Answer

I would like to extend @Digvijay's answer further more to provide extended explanation, which consists

1. `Logic`

2. `Responsive Sidebar`

3. `Responsive Sidebar with hamburger menu`

You'll have to work with relative absolute and z-index to make this work.

1. Logic:

Have parent relative having z-index value less than the child absolute div which will be used for navbar.

Code:


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

Output:

enter image description here

Code Link: tailwind play

2. Responsive Sidebar

If you are aiming to build responsive sidebar which overlaps only on the mobile screen but would be normal div in the large screen then follow the below code.

Code:

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

Code link : tailwind play

Output in large device:

enter image description here

Output in smaller device:

enter image description here

3. Toggle mobile navbar using hamburger menu

Output on large devices

enter image description here

Output in small device with `hamburger menu`

Enter description

When clicked on `hamburger menu`

Code:

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

Div on top of another with Tailwind CSS

Tags:

tailwind-css

Cesare

2 Answers

Digvijay

1. `Logic`

2. `Responsive Sidebar`

3. `Responsive Sidebar with hamburger menu`

1. Logic:

Code:

Output:

Code Link: tailwind play

2. Responsive Sidebar

Code:

Code link : tailwind play

Output in large device:

Output in smaller device:

3. Toggle mobile navbar using hamburger menu

Output on large devices

Output in small device with `hamburger menu`

When clicked on `hamburger menu`

Code:

krishnaacharyaa

Recent Activity

Donate For Us

Div on top of another with Tailwind CSS

Tags:

tailwind-css

Cesare

2 Answers

Digvijay

1. Logic

2. Responsive Sidebar

3. Responsive Sidebar with hamburger menu

1. Logic:

Code:

Output:

Code Link: tailwind play

2. Responsive Sidebar

Code:

Code link : tailwind play

Output in large device:

Output in smaller device:

3. Toggle mobile navbar using hamburger menu

Output on large devices

Output in small device with hamburger menu

When clicked on hamburger menu

Code:

krishnaacharyaa

Related questions

Recent Activity

Donate For Us

1. `Logic`

2. `Responsive Sidebar`

3. `Responsive Sidebar with hamburger menu`

Output in small device with `hamburger menu`

When clicked on `hamburger menu`