Tailwind or CSS zIndex issue

I have a problem where I have a theme layout which I want in such a way for re usability.

The problem is, is that I wanna position theme layout on the page, relative to the whole page, but no matter what I do the navbar covers the button, if I give the button padding so it is below the navbar I can see it. So I messed about with the zIndex to no avail. I hope you can help.

Here is my layout

import React, { useState, useEffect } from 'react'

export default function ThemeLayout({ children }) {

    const [theme, setTheme] = useState(
        localStorage.getItem("theme") || "light"
    );

    useEffect(() => {
        document.documentElement.setAttribute("data-theme", theme);
        localStorage.setItem("theme", theme);
    }, [theme]);

    const toggleTheme = () => {
        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
    };

    return (
        <div className={`${theme} text-primarytext overflow-x-hidden`}>
            <label className="inline-flex items-center cursor-pointer">
                <input type="checkbox" value="" className="sr-only peer" onClick={toggleTheme} />
                <div
                    className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-grey-600 dark:peer-focus:ring-grey-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-grey-900"
                ></div>fix this later problem with positioning and z index - has to be solo component
            </label>
            {children}
        </div>
    )
}

The object in question that I want zIndex on

            <label className="inline-flex items-center cursor-pointer">
                <input type="checkbox" value="" className="sr-only peer" onClick={toggleTheme} />
                <div
                    className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-grey-600 dark:peer-focus:ring-grey-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-grey-900"
                ></div>fix this later problem with positioning and z index - has to be solo component
            </label>

The parent

return (
        <FadeInLayout>
            <ThemeLayout>
                <nav className="w-full bg-navbar border-b border-zinc-800">