When it comes to positioning elements on a webpage, both "relative" and "absolute" positioning play a crucial role, each with its own unique framework. With "absolute" positioning, the element is positioned relative to another enclosing element, while "relative" positioning is based on where the element would be without any positioning.

Your choice between the two depends on your specific needs and objectives. If you want to move an element from its natural flow within a layout, then "relative" positioning is ideal – for example, to create superscript characters. On the other hand, if you need to place an element within a specific coordinate system established by another element, then "absolute" positioning is the way to go – like overlaying text on an image.

An interesting tip is to use "relative" positioning without any actual displacement by just setting position: relative. This can turn the element into a reference frame, allowing you to use "absolute" positioning for elements contained within it in the markup.

It's important to remember that if you want an absolutely positioned element to be contained within a parent element, you must set the parent element's position to relative. This ensures that the child element stays within the boundaries of the parent and is not positioned relative to the entire window.

I recently published a blog post demonstrating this concept with a simple example. The result is a green div positioned at the bottom of a yellow parent div.

Check out the blog post for more details: here

Relative Positioning Explained:

If you set the position to relative, you have the ability to use top/bottom and left/right to shift the element from its original location in the document.

Absolutely Positioned Elements:

With absolute positioning, the element is taken out of the document flow and positioned precisely where you specify.

These concepts are elaborated on at , along with practical examples demonstrating both absolute and relative positioning techniques.

Relative : When an element is positioned relative to its current position, it can still be moved. A RELATIVE positioned element is placed relative to ITSELF.

Absolute : An ABSOLUTE positioned element is positioned in relation to its CLOSEST POSITIONED PARENT. If a parent element is present, the positioning works similarly to fixed... relative to the window.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

In this scenario, the position of the 2nd parent div is set as relative, so the middle div will adjust its position with respect to the 2nd parent div. If the position of the 1st parent div were relative, then the middle div would change its position in relation to the 1st parent div. More Information

Since my reputation isn't high enough to comment, I'll share some additional information related to footer and positioning issues that I've encountered.

Setting up a webpage can be tricky, especially when trying to keep the footer at the bottom using absolute positioning while ensuring the main container has relative positioning.

I faced challenges with text content and menus within the white space of the page between the header and footer. When these elements were set to absolute positioning, the footer would no longer stay in place.

Positioning can indeed be complex, as you mentioned.

To address this, I decided to give the content I wanted in an 'absolute' position a relative position instead. I positioned it 35em below my drop-down menu (which had a height of 35em when fully extended).

By setting Top:-35em for the content that was previously pushed aside, along with adding margin-bottom:-35em, I was able to visually align the content with the drop-down menu without compromising the layout. The white space below the content leading to the footer was maintained with a 10em margin as well.

 html, body {
    margin:0;
    padding:0;
    height:100%;
}
h1 {
    margin:0;
}
#webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
#header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
#text {
    position:relative;
    margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
}
#dropdown {
    position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;
}
#footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
    margin-top:5em;
}

Although your question has already been answered satisfactorily, I found this solution helpful after experiencing similar troubles. It helped me grasp positioning concepts better.

Placing text below the drop-down menu without displacing it is achieved by utilizing relative positioning and adjustments such as top:-35em and margin:-35em to balance the layout effectively.

Negative values may sometimes be overlooked but they offer great functionality once understood properly!

While fixed positioning seemed logical for the footer, I preferred a setup that allowed the footer to adjust based on content length. This approach worked seamlessly across different platforms and devices.

Remember to use 'em' over 'px' for a more flexible and dynamic page layout!

This method may not be the ultimate solution, but it served me well across various platforms and devices.

Relative vs Absolute:

• Distinguishing factor: It is relative to itself, while it is relative to the nearest positioned ancestor.
• Distinguishing factor: Surrounding elements acknowledge its previous presence, whereas surrounding elements do not recognize its past existence.
• Similarity: Adjacent elements do not acknowledge its updated status, and neither do they recognize its new state of being.

Let's delve into a scenario to illustrate the contrast between absolute and relative positioning.

Imagine having a header element inside the body with a height of 95% in viewheight (95vh). Within this container, you place an image with reduced opacity and now wish to position a logo near the top left corner. By resetting margins and paddings to zero as shown below,

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

You ensure that no default spacing is applied to elements, paving the way for two possible ways to achieve your goal.

First Approach

• Assign a class, say "logo," to the image.

• In CSS, define:

  .logo{
      float:left;
      margin-top:40px;
      margin-left:40px;
    }

• This sets the logo at a desired location within the parent header but consumes unnecessary space due to added margins.

However, taking a different route is more efficient.

Second Approach

• The image with the logo class remains under the header element.

• Set the position property of the header class to relative:

  .header{
     position: relative;
   }

• Then, add the following properties to the logo class:

  .logo{
      position:absolute; 
      top:40px;
      left:40px
   }

This approach ensures precise positioning without consuming additional space with margins. The key lies in using relative for the parent element and absolute for its child when aiming to position the child element precisely within its parent.

By embracing relative and absolute positioning judiciously, you can avoid unnecessary use of margins and accurately place elements as intended. Thank you.

Absolute positioning removes an element from the normal flow layout and positions it relative to the closest parent that has a position property other than static (which is the default for all parents). This is commonly used in conjunction with relative positioning.

While you can technically use relative positioning alone, this is quite rare.

I have created a video tutorial to further explain this concept.

Check out the video here!

• Static: Default setting with no impact
• Relative: Applies from its normal position in the html structure.
• Absolute: Influenced by the parent Div/Box.

To get a better understanding, refer to the image below:

https://i.sstatic.net/eeSxo.png