Follow these steps to position a child div absolutely within a grandparent div with the following structure

Question

Follow these steps to position a child div absolutely within a grandparent div with the following structure

Is it possible to make the child div absolute for the grand parent div without changing the parent div's position? Here is the scenario: the parent div is a relative div, but the grand parent div is also a relative div. How can we achieve this without altering the parent div's position? See the code sample below:

<!-- grand parent div-->
<div style="position:relative">
  <!-- parent div -->
  <div style="position:relative">
    <!-- child div -->
    <div style="position:absolute">

    </div>
  </div>
</div>

Is there a way to accomplish this?

html css

Answer 1

Answer №1

To achieve the desired result, set the child element to have a position of fixed and apply a null transform to the grand-parent element (if a transform is not already applied) to establish it as the containing block for the fixed element.

.grand {
  border:5px solid;
  padding:50px;
  transform:translate(0);
  margin:50px;
}
.parent {
  height:100px;
  border:5px solid red;
}
.child {
  width:50px;
  height:50px;
  background:green;
  top:0;
  left:0;
}

<!-- grand parent div-->
<div style="position:relative" class="grand">
  <!-- parent div -->
  <div style="position:relative" class="parent">
    <!-- child div -->
    <div style="position:fixed" class="child">

    </div>
  </div>
</div>

This approach also works with a filter property:

.grand {
  border:5px solid;
  padding:50px;
  filter:opacity(100%);
  margin:50px;
}
.parent {
  height:100px;
  border:5px solid red;
}
.child {
  width:50px;
  height:50px;
  background:green;
  top:0;
  left:0;
}

<!-- grand parent div-->
<div style="position:relative" class="grand">
  <!-- parent div -->
  <div style="position:relative" class="parent">
    <!-- child div -->
    <div style="position:fixed" class="child">

    </div>
  </div>
</div>

For more insights into this technique, refer to: CSS-Filter on parent breaks child positioning

Answer 2

To achieve the desired result, set the child element to have a position of fixed and apply a null transform to the grand-parent element (if a transform is not already applied) to establish it as the containing block for the fixed element.

.grand {
  border:5px solid;
  padding:50px;
  transform:translate(0);
  margin:50px;
}
.parent {
  height:100px;
  border:5px solid red;
}
.child {
  width:50px;
  height:50px;
  background:green;
  top:0;
  left:0;
}

<!-- grand parent div-->
<div style="position:relative" class="grand">
  <!-- parent div -->
  <div style="position:relative" class="parent">
    <!-- child div -->
    <div style="position:fixed" class="child">

    </div>
  </div>
</div>

This approach also works with a filter property:

.grand {
  border:5px solid;
  padding:50px;
  filter:opacity(100%);
  margin:50px;
}
.parent {
  height:100px;
  border:5px solid red;
}
.child {
  width:50px;
  height:50px;
  background:green;
  top:0;
  left:0;
}

<!-- grand parent div-->
<div style="position:relative" class="grand">
  <!-- parent div -->
  <div style="position:relative" class="parent">
    <!-- child div -->
    <div style="position:fixed" class="child">

    </div>
  </div>
</div>

For more insights into this technique, refer to: CSS-Filter on parent breaks child positioning

Follow these steps to position a child div absolutely within a grandparent div with the following structure

Answer №1

Similar questions

Gulp does not generate any files

Is it possible to simultaneously center and display an iframe inline?

Tips for adjusting the font color of user-provided text within an input box using HTML and CSS

Personalize the Bootstrap 4 CDN option

The Bootstrap Dynamic Navbar is not adjusting for mobile devices because of the addition of a logo

What is the best way to position href text on the top of a rectangular div box?

Experiencing an unusual gap following the menu on mobile view for my WordPress website?

Establish the container with a specific height and enable scrolling functionality

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

Having trouble with the Bootstrap dropdown? The unordered list isn't dropping down as expected. What could be the issue?

Developing JSON with the use of jQuery

The Street View feature on Google Maps API is now showcasing a cool,

The email message content is not displaying correctly

Newspaper-style text layout with Bootstrap columns

Custom Pug design without any CSS files added

SwipeJS is not compatible with a JQuery-Mobile web application

What is the best way to incorporate a hyperlink in a React project using Tailwind

What could be the reason that my Bootstrap dropdown menu is not appearing on my website

The value entered is displaying as not defined

Why Jquery's nth-child selection and conditional formatting are failing to work