Css Sibling Absolute Positioning

Question

Is there any way to absolutely position a div relatively to its sibling? For example: Inside a div there are two other divs - div1 and div2. I want to absolutely position di

Answer 1

The correct answer is: No, but at least its vertical position can be affected by siblings.

As the other answers state, the position of an absolutely positioned div is relative to its ancestors. To be precice, its relative to the first ancestor that isn't statically positioned, when traversing up the DOM-tree.

However: an absolutely positioned element will also be affected by its siblings (the ones that come before the element). If those preceding siblings are relatively positioned, and your absolutely positioned element has its top-property not set, then it's placed vertically below those relatively positioned siblings.

  
relative 1
  
relative 2
  
absolute top 0
  
absolute
 

See this fiddle: https://jsfiddle.net/fgxeu54t/28/