Unable to float div in tailwind CSS - html

Question

I want my sidebar to be on the righthand side of the screen and it's stuck on the left.
Parent
<div className="relative w-full min-h-screen h-full bg-primary-color-light dark:bg-primary-color-dark ">
<SlideNav toggleSidebar={setToggleSidebar} sideOpen={toggleSidebar} />
</div>
Sidebar
<div className={`absolute h-full top-16 ease-in-out duration-200 float-right mr-0 ${!sideOpen && "-mr-96"} w-72 bg-white dark:bg-secondary-color-dark shadow dark:text-white select-none`}>
<div className="flex flex-col align-center text-sm ">
<div className="border-y dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><MdOutlineMarkChatUnread className="mt-1 text-lg" /><span>Reading Queue</span></div>
<div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><BsTags className="text-xl" /><span>Create Category</span></div>
<div className="border-b dark:border-primary-color-dark py-5 px-5 flex items-center group hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiHeart className="text-2xl group-hover:text-red-600" /><span>Favorites</span></div>
<div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><MdOutlineMarkChatRead className="text-lg" /><span>Read</span></div>
<div className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiSettings className="text-xl" /><span>Settings</span></div>
<div onClick={() => ToggleTheme()} className="border-b dark:border-primary-color-dark py-5 px-6 flex items-center hover:bg-slate-100 dark:hover:bg-hover-color-dark hover:cursor-pointer space-x-3"><CiCloudMoon className="text-xl" /><span>Toggle Theme</span></div>
</div>
<div className="py-3 border-t dark:border-primary-color-dark flex bottom-0 items-center dark:hover:bg-hover-color-dark hover:bg-slate-100 hover:cursor-pointer justify-center"><div className="flex items-center space-x-3 text-sm"><RiLogoutBoxLine /><span>Logout</span></div></div>
</div>
Why is this the case if the parent is set to relative?

Answer 1

Use absolute inset-y-0 right-0 to position to the right of the screen
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 right-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:
Code link: Tailwind play