Categories
CSS

How to add fixed position but relative to container with CSS?

Spread the love

To add fixed position but relative to container with CSS, we set the contain property of the parent.

For instance, we write

<div class="parent">
  <div class="child"></div>
</div>

to add nested divs.

Then we write

.parent {
  contain: content;
}

.child {
  position: fixed;
  top: 0;
  left: 0;
}

to set contain to content on the parent and set position to fixed on the child to make the child stay fixed in the parent.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *