Why Is a Div with "Position: Absolute" Not by Default Relative to the Document

Why does the absolute positioning (position:absolute) cannot be placed inside a static parent container?

HTML elements are positioned static by default and static positioned elements are not affected by the top, bottom, left, and right properties so an element with position: static is not positioned in any special way; it is always positioned according to the normal flow of the page.

An absolute positioned element will position itself relative to the nearest positioned ancestor and the reason why it can't be relative to a static element parent is because otherwise absolute wouldn't be able to position with respect to anything other than the element's immediate pareny and it will have to apply calculations on every element instead of being able to take just shorter paths for static positioning elements.

The use of static positioned elements allows you to have arbitrary elements containers and this let's you have an element to be positionable relative to the element container you wish and not neccerly the intermediate parent.

Why absolute position in CSS keeps binding to document body instead of enclosing div?

Add position: relative;.

 #Upper_Left {
   position: relative;
   display: inline;
   float: left;
   max-width: 500px;
   max-height: 118px;
   min-width: 500px;
   min-height: 118px;
  }

http://codepen.io/anon/pen/xZwNam

Force position: absolute to be relative to the document and not the parent container

You will have to place the div outside of the position:relative element and into body.

In CSS Position, is Absolute inside Relative, Absolute to the document or the parent element?

An element with position: absolute is absolute to it's nearest non-static parent container. For example, I have a position: relative div, inside that a normal paragraph, and inside that an absolute span. That span is absolute, not to the paragraph (which has no defined position, so is default to static) but to the div which is relative.

For relativeness to the whole document, you used position: fixed. The reason (in your example) that divB would seem absolute to the document, is because it doesn't find any parents with position:relative, and eventually ends up using the body.

Understand default placement of absolute positioned element

If you set the img to position: absolute, it will get out of the flow, but stay where it is in the normal flow. The document and other elements will behave like the absolutely positioned element does not exist.

Only by applying top, bottom, left or right values, will make it actually go somewhere

From the W3C wiki :

The box is taken out of the normal flow. The box's position (and
possibly size) is specified with the 'top', 'right', 'bottom', and
'left' properties.

W3C wiki CSS:position

Note: This has been replied in this SO question

Why position: absolute; and bottom: 0; not being at body's bottom?

From MDN's documentation on absolute positioning:

The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block), which the containing block of the document's root element.

This describes that it's not the body that it is positioned to, but the initial containing block, which has the dimensions of the viewport, not the body.

By adding position: relative; to body, the element will be aligned to the bottom.

More info on the Initial Containing Block can be found at the W3 specification

---

Related Topics