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

Overlapping Dropdown Javascript Menus

Creating a lively JQ plot and saving it within an HTML file from a .aspx page using C# .net

Using JQuery to animate a division towards the left

Styling emails in an inbox with CSS

Issue with AngularJS: Not able to get second app in template to function properly

Locate specific elements on a webpage without scanning through the entire content

"Resolving the issue with unnecessary line breaks in Optimizepress when input is contained within a paragraph

Is there a way to adjust the transparency of a span element's background without affecting the text itself?

using hover/click functionality with a group of DIV elements

How can the default text color be adjusted in NSAttributedString when initialized with HTML dark mode?

Expansive dropdown options in the navigation bar

Is there a way for me to view the contents within the box?

Tips for inserting a rotated image using CSS

The HTML form is not displaying any content and instead is returning "Not a Number

Styling rounded buttons with GTK and CSS

Conceal button divider on pager in Jqgrid

Using JavaScript to dynamically load Cascading Style Sheets based on the current

Using AJAX to submit a form and retrieve response data in Javascript

Utilize JQuery to Extract HTML Elements

Modifying the default text within a select box using jQuery