How can I position a div fixed relative to the body, when it's inside a fixed parent div?

Question

I'm currently working on a CSS layout where I have a fixed parent div containing another div. I want the inner div to be fixed relative to the body, not its parent.

Code (Tailwind):

<div class="h-screen bg-red-100">
  <div class="fixed left-1/2 top-1/2 h-80 w-80 -translate-x-1/2 -translate-y-1/2 bg-red-300">
    <div class="fixed top-10 h-40 w-40 bg-red-600">I want to make this div fixed relative to body</div>
  </div>
</div>

Tailwind Playground

Is there a way to achieve this without JavaScript? If not, how can I accomplish it using JavaScript?

I've also researched extensively and searched on Stack Overflow, but I couldn't find a solution that fits my exact requirements.

Thank you!

More Info:

Based on @Paulie_D and @Yogi 's replies, I checked once again in my code. If I am using any translate property in my code, then I found out that it's for modal opening and closing transition (opening from top to down and closing from down to top). I have added the translate property for this purpose.

 <div
      role="dialog"
      aria-modal="true"
      tabIndex="-1"
      onKeyDown={handleTabKey}
      ref={modalRef}
      className={`fixed top-0 left-0 inset-0 flex justify-center items-center bg-black z-50 bg-opacity-50 backdrop-blur-sm ${
        isModalOpen ? "opacity-100" : "opacity-0 pointer-events-none"
      } transition-all ease-in-out`}
    >
      <div
        className={`bg-white rounded-md w-[30%] p-3 tb:p-6 ${
          isModalOpen ? "translate-y-0" : "-translate-y-full"
        } transition-all ease-in-out`}
      >
        . . . .
     </div>
    </div>

Now I am going to remove it, but please, can anyone help me with how we can achieve the same transition without the translate property?

Answer 1

Have you tried adding position:relative to the nested div? Fiddle with CSS example

.container-div {
  padding: 10px 10px 0;
background-color:#c3c3c3;
width:200px;
}

.child-div {
  display: inline-block;
  width: 100px;
  height: 60px;
  position:relative;
    top:-20px;
  border: 1px solid #efefef;
  background-color: #f5f5f5;
}

<br><br><div class="container-div">
  <div class="child-div">
This div appears to be nested.
  </div>
</div>

Answer 2

Try adding position: relative in the second child or parent or body and position: fixed on the third:

Code:

<div class="flex justify-center items-center h-screen bg-red-100">
  <div class="h-80 w-80 bg-red-300">
    <div class="fixed left-0 top-0 flex h-40 w-40 items-center justify-center bg-red-600">I want to make this div fixed relative to body</div>
  </div>
</div>

External CSS:

body {
  position: relative;
}

Result:

Answer 3

Remove Transforms from Parent Element

The specifications note:

Any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

OP's code breaks fixed positioning by using a translate transform to center the parent element on the page.

Fix the problem by using flex to center the parent element without a transform. This can be done using Tailwind flex classes. This centers the parent without affecting the fixed positioning of the child element.

Tailwind References: Flex , Align Items , Align Content

Code Snippet

<div class="flex justify-center items-center h-screen bg-blue-100">
  <div class="fixed top-20 h-80 w-80  bg-red-300">
    parent - centered
    <div class="fixed top-10 left-0 h-40 w-40 bg-green-600 text-white">
    child - fixed to body
    </div>
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>