Why does a relatively positioned element always begin at the top corner of the window?

Question

Why does a relatively positioned element always begin at the top corner of the window?

I am really struggling to understand the concept of relative versus absolute positioning, especially when dealing with parent or grandparent elements that have position values. Can someone please help me clarify these two scenarios:

Case 1:

grandparent - absolute
parent - relative
child - absolute

Case 2:

grandparent - absolute
parent - relative
child - absolute

However, in this case, the parent is not directly nested within the grandparent like shown below:

<div class="grand-parent">

</div>

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

     </div> 
 </div>

Here is a link to a fiddle where I've been working on this issue: https://jsfiddle.net/4KUWc/32/

My questions are:

I'm having trouble seeing the difference between the two cases mentioned above. Shouldn't case 2 have the parent div start after the grandparent? Why does it seem to take (0,0) coordinates?
If a relative element has an absolute parent, will it follow the positioning of the absolute parent or will it maintain its independence?
Is it possible to have relative children with an absolute parent?

html css

Answer 1

Answer №1

`position:absolute`

When using position:absolute, the relational positioning attributes (such as top, bottom, right, etc.) are calculated from the closest ancestor that has a position value other than static. If no such ancestor exists, the <body> element will be used as reference.

`position:fixed`

With position:fixed, the relational positioning attributes are calculated based on the closest viewport, which is typically the <body> element. However, if an element is 3D transformed, it can act as its own viewport for its children - more details can be found in Eric Meyer's article on Unfixing fixed elements with transforms.

Both absolute and fixed positions remove the element and its children from the content flow of their parent, making them essentially invisible to subsequent elements in the DOM.

`position:relative`

Elements with position:relative have their relational positioning attributes calculated based on where they would normally appear in the parent's content flow, even after applying relational positioning attributes. Unlike fixed and absolute positions, relative position does not remove the element from the parent's content flow.

Answer 2

`position:absolute`

When using position:absolute, the relational positioning attributes (such as top, bottom, right, etc.) are calculated from the closest ancestor that has a position value other than static. If no such ancestor exists, the <body> element will be used as reference.

`position:fixed`

With position:fixed, the relational positioning attributes are calculated based on the closest viewport, which is typically the <body> element. However, if an element is 3D transformed, it can act as its own viewport for its children - more details can be found in Eric Meyer's article on Unfixing fixed elements with transforms.

Both absolute and fixed positions remove the element and its children from the content flow of their parent, making them essentially invisible to subsequent elements in the DOM.

`position:relative`

Elements with position:relative have their relational positioning attributes calculated based on where they would normally appear in the parent's content flow, even after applying relational positioning attributes. Unlike fixed and absolute positions, relative position does not remove the element from the parent's content flow.

Answer 3

Answer №2

It's important to remember that there is no magic trick involved in understanding how each position works. Here is a brief summary to help clarify:

All elements are initially set to position: static, causing them to stack on top of each other, or inside one another if nested.
If an element has display: none or its width and height set to 0px, it will not take up any space and other elements will render as if the hidden element didn't exist.
The CSS properties top, bottom, right, left, and z-index have no effect on elements with a static position. For these properties to work correctly, the element must be positioned as relative, absolute, or fixed.
relative and static positions are similar, but relative takes into account properties like top, bottom, right, left, and z-index.
An element with a relative position is placed relative to its parent position.
Elements with absolute or fixed positions are similar, except absolute elements are positioned relative to the body, while fixed elements are positioned relative to the window (referencing @AndreiGheorghiu's explanation about fixed position and 3D transform).
An absolute element is positioned relative to its nearest non-static parent. If all parents are static, then the element will be positioned relative to the body.

Answer 4

It's important to remember that there is no magic trick involved in understanding how each position works. Here is a brief summary to help clarify:

All elements are initially set to position: static, causing them to stack on top of each other, or inside one another if nested.
If an element has display: none or its width and height set to 0px, it will not take up any space and other elements will render as if the hidden element didn't exist.
The CSS properties top, bottom, right, left, and z-index have no effect on elements with a static position. For these properties to work correctly, the element must be positioned as relative, absolute, or fixed.
relative and static positions are similar, but relative takes into account properties like top, bottom, right, left, and z-index.
An element with a relative position is placed relative to its parent position.
Elements with absolute or fixed positions are similar, except absolute elements are positioned relative to the body, while fixed elements are positioned relative to the window (referencing @AndreiGheorghiu's explanation about fixed position and 3D transform).
An absolute element is positioned relative to its nearest non-static parent. If all parents are static, then the element will be positioned relative to the body.

Why does a relatively positioned element always begin at the top corner of the window?

Answer №1

`position:absolute`

`position:fixed`

`position:relative`

Answer №2

Similar questions

Troubleshooting Material-UI Menus

Modifying the page header content using JavaScript

Customizing the appearance of the file input type using an image in HTML and CSS

Creating a clickable link that dynamically updates based on the span and id values, and opens in a new browser tab

Adjusting diagram size based on screen width using Bootstrap and jQuery

Is there a way to preserve the original color format without converting it to RGB

What could be the reason for the body background color refusing to change

PHP Table Sorting Functionality

Unable to create the complete PDF file using html-pdf in a NodeJS environment

Issues with CSS rendering have been encountered on the Facebook page

Interested in mastering BootStrap for Angularjs?

Position two div elements so that the second div expands to occupy the entire available space

How to use jQuery to select an element by using 'this' on a button

Tips on incorporating several class names into Next.js elements

Is there a way to prevent users from copying data or switching tasks when using my program or website?

Searching for a JavaScript tool that offers syntax highlighting capabilities

HTML dynamic voting system

Why is the Bootstrap template working on index.html but not on any other React components?

Design and styling with HTML5 and CSS

Instructions on creating a number increment animation resembling Twitter's post engagement counter