Skip to content

How to Set Position Absolute but Relative to Parent in CSS ?

How to set fixed position but relative to container in CSS ?

Last Updated : 02 Apr, 2025

In CSS, setting an element’s position as "fixed" relative to a container, rather than the entire viewport, can be done by using a combination of CSS properties. While position: fixed works relative to the viewport, there are other methods like position: sticky and position: absolute that can help achieve the desired behavior within a container.

Approach 1: Using position: sticky

position: sticky allows an element to act like a normal element until it reaches a specified offset value. Once the offset is reached, the element "sticks" in place as the page continues to scroll.

HTML

<!--Driver Code Starts{--> <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Sticky Positioning Example</title> <!--Driver Code Ends }-->      <style>         .container {             height: 300px;             width: 300px;             border: 2px solid #333;             overflow-y: scroll;             position: relative;         }          .sticky-header {             position: sticky;             top: 0;             background-color: green;             padding: 10px;             color: white;             text-align: center;         }          .content {             padding: 10px;         }     </style> </head> <body>  <div class="container">     <div class="sticky-header">I Stay Fixed When Scrolling!</div>     <div class="content">         <p>Scroll down to see the sticky behavior.</p>         <p>Sticky elements remain fixed within their container.</p>     </div> </div>  </body> </html>

The .sticky-header remains at the top of the container as the user scrolls.
The sticky element stays confined to the parent container’s boundaries..

Approach 2: Using position: absolute with position: relative on Parent

To position an element relative to its container, use position: absolute on the child element and position: relative on the parent container. This method allows you to position the child element anywhere within the container.

HTML

<!--Driver Code Starts{--> <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Absolute Positioning Example</title> <!--Driver Code Ends }-->      <style>         .container {             position: relative;             width: 300px;             height: 300px;             border: 2px solid #333;             overflow: hidden;         }          .absolute-element {             position: absolute;             bottom: 10px;             right: 10px;             background-color: #20b2aa;             padding: 10px;             color: white;         }     </style> </head> <body>  <div class="container">     <div class="absolute-element">I am Fixed Relative to My Container!</div> </div>  <!--Driver Code Starts{-->  </body> </html>  <!--Driver Code Ends }-->

The .absolute-element is positioned at the bottom-right of the .container regardless of scrolling.
The child element stays within the container's boundaries and moves with it if the container is scrolled.

Approach 3: Using position: fixed (Viewport-based)

position: fixed positions an element relative to the viewport, not the container. It is fixed in place even when the page is scrolled. While this approach doesn’t work relative to the container, it’s helpful to understand how it behaves.

HTML

<!--Driver Code Starts{--> <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Fixed Position Example</title> <!--Driver Code Ends }-->      <style>         .fixed-element {             position: fixed;             bottom: 10px;             right: 10px;             background-color: #ff4500;             padding: 10px;             color: white;         }     </style> </head> <body>  <div class="fixed-element">I am Fixed in the Viewport!</div>   <!--Driver Code Starts{--> </body> </html>  <!--Driver Code Ends }-->

The .fixed-element stays at the bottom-right of the viewport, not the container.
The element stays in the same position on the screen, even when the page is scrolled.

How to Set Position Absolute but Relative to Parent in CSS ?

M

mynameisdipakgupta

Improve

Article Tags :

Similar Reads

How to Set Position Absolute but Relative to Parent in CSS ?

The position: relative property changes the position of the element relative to the parent. The position-relative property can be applied to any section then the elements in that section are positioned in the normal flow of the document. It is relative to the original position with respect to the pa

Relative vs Absolute vs Fixed Position in CSS

CSS positioning is a fundamental concept in web design and development that allows precise control over how elements are arranged on a webpage. There are three main types of CSS positioning: relative, absolute, and fixed positioning. What is Relative Positioning?Relative Positioning is a CSS techniq

What is the Position of an element relative to its container in CSS ?

In this article, we will learn what is the position of an element relative to its container. The position property in CSS tells about the method of positioning for an element or an HTML entity. There are five different types of position properties available in CSS: Fixed: Any HTML element with posit

How to Position a Fixed Element in the Top Right Corner using CSS ?

In CSS, Positioning the fixed element in the top fight corner consists of maintaining the fixed position of the element by using Absolute Positioning or by using Flexbox Layout. These are the following methods: Table of Content Using Absolute PositioningUsing FlexboxUsing Absolute PositioningIn this

How to Fix Button Position in CSS?

Position of elements on a webpage allows us to place elements in any particular position we want. The button is an interactive element that requires a specific placement for better usability. We can place buttons using several Position methods, in CSS each serving different purposes. Below are some

How to position a div at the bottom of its container using CSS?

Positioning a div at the bottom of its container means aligning the div so that it stays at the lowest point within the container's boundaries. This can be done using CSS techniques like absolute positioning, Flexbox, or Grid, each method providing different layout control options. Table of Content

How to use the position property in CSS to align elements ?

In this article, we will learn how to use the position property in CSS to align elements. We can align elements using position property using CSS with some helper property of it. Approach: The position property is used to set the position of the element. We can align elements using position property

How to center the absolutely positioned element in div using CSS?

Centering an absolutely positioned element in a div using CSS involves adjusting the position both vertically and horizontally. By using a combination of the top, left, and transform properties, we can ensure the element is perfectly centered within its container. This method creates a balanced and

How to align item to the flex-end in the container using CSS ?

Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items

How to stretch div to fit the container ?

Stretching a child div to fit the full width and height of its parent container can be achieved through various CSS methods. Here are two effective methods to accomplish this: Method 1: Using 100% Width and HeightThis is the most simple approach. By setting the width and height properties of the chi