0

I have a problem understanding absolute positioning, when the parent is not either absolute or relative. I understand that absolute positioning will place itself based on the offsets with respect to it's parent, which can relative or absolute.
If the parent is not absolute or relative? Will it position itself to the nearest absolute or relative element. Or will it position itself relative to the body?

I do not have a problem when the parent is relative or absolute. I have a problem in understanding what is gonna happen if the parent is static. How the absolute element is gonna place itself

gates
  • 4,465
  • 7
  • 32
  • 60
  • 1
    Possible duplicate of [How CSS Positions work, why absolute elements stack up on each other instead of stacking one after other](http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of) – Vucko Nov 26 '15 at 09:23
  • It does not explain, it explains only until the part I was talking about. Can you are read my question and their answer please – gates Nov 26 '15 at 09:27
  • It will be relative to the next highest element that is relative or absolute. If there are no parents which are positioned in this way then it's just relative to the page/body. – Andy Furniss Nov 26 '15 at 09:30
  • can you point me to a source? – gates Nov 26 '15 at 09:34
  • @gates See under `position:absolute` on http://www.w3schools.com/css/css_positioning.asp – abhishekkannojia Nov 26 '15 at 09:35

2 Answers2

0

Assigning an element as absolute essentially takes it out of the "normal" flow of the webpage.

This essentially means that absolutely positioned elements can be placed anywhere on the page by instructing them to be at certain points in accordance with their nearest relative parent.

By default, most elements inherit the position of static, meaning they form on the page as they "should" (basically meaning, they follow one after the other depending on where they're specified). To quote Chris Coyier at CSS Tricks, position relative pretty much means "relative to itself", so merely assigning an element to be relative is basically the same as leaving it as static, unless you instruct it position itself otherwise.

Remember, if you set an element to be absolute, it will look for it's closest relative parent - it will progressively look higher and higher up the DOM tree till it finds one, that can sometimes be the <html> tag itself if no others are defined as relative.

The following link explains this topic much better than I can, please check it out: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

David Wilkinson
  • 5,060
  • 1
  • 18
  • 32
  • I am sure it is not gonna be html, it is body. But my doubt is in between body the absolute tag, if there is a relative element, will the absolute element position offset according to it – gates Nov 26 '15 at 09:50
  • is set to static by default, so unless it is set to relative, an absolute element could find that the html element is its nearest "parent" as no elements are set as relative - that was my hypothetical point. – David Wilkinson Nov 26 '15 at 09:57
0

This is defined here: http://www.w3.org/TR/css3-positioning/#def-cb

Relevant blurbs from that reference:

For fixed, absolute, center and page, it is defined as follows:

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a position other than static, in the following way: 1. In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor. 2. In the case that the ancestor is inline-level, the containing block depends on the direction property of the ancestor ...

and

If there is no such ancestor, the containing block is the initial containing block

More details here: http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

So, to answer your question directly - the containing block is established by the nearest ancestor with a position other than static. If there is no such ancestor, then the containing block is the initial containing block. This incidentally happens to be html. This is the reason why many developers choose to provide position: relative to body in order to avoid confusion with the viewport.

Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • position: relative to body, seems weird though! – gates Nov 26 '15 at 10:05
  • @gates: In reality position:relative isn't needed on the body at all because that is the viewport anyway and absolute elements will use this for their context by default. But, several developers have used that especially for avoid quirks in earlier browsers. – Abhitalks Nov 26 '15 at 10:27