Absolutely Position One Element Relative to Its Sibling Element

Css Sibling Absolute Positioning

Absolute positioning is dependent on the "current positioning context", which may include a parent element (if absolutely or relatively positioned) but will never include a sibling element.

Can you reorganize your dom so that you have a parent-child instead of siblings? If so, you could set the parent's position to relative or absolute and the child's position to absolute and the child's position would remain absolute in relation to the parent.

CSS absolute position orients on sibling rather than parent

To clarify:

"I have always thought that if I position an element absolutely it would
be positioned relative to it's parent element"

Nope. If an element has position: absolute;, it is positioned relative to the nearest parent in the DOM chain that has position: relative; or position: absolute; specified on it. If no parents have it (ie. they are all position: static, which is the default), then it is positioned relative to the document (page).

When using position: absolute, always:

1. Be aware of what parent you want it positioned relative to, and make sure that parent has position: relative; on it.
2. Specify one or more of the top/right/bottom/left attributes on the absolutely positioned object.

Why absolute positioned element looks at its sibling element?

position:absolute; looks for the nearest element with position:relative/absolute, and makes his position, based on that element.

In your case, as you have position:relative in the image, the "Irene" text will be placed at the top left corner of the image.

For "Irene" to be at the top left of the document, you either apply position:fixed, wich is based on the browser window, or remove all the position:absolute/relative that are above the "Irene" element.

Place absolute element under sibling

Apply position: relative; to .box so that it will support the z-index value without effecting the layout.

.box {
  width: 200px;
  height: 40px;
  background-color: white;
  box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 10;
}

Another option is to change z-index of .button to -1. But it may have other effects in the layout since the element will be positioned behind all other elements.

.button {
  height: 20px;
  width: 20px;
  background-color: white;
  text-align: center;
  position: absolute;
  right: -20px;
  top: 10px;
  z-index: -1;
}

Static positioned elements affect Absolute position of subsequent sibling elements

As this answer explains, if there is no (top, left, right, bottom) attributes the position: absolute element will be positioned by default as if it was part of the normal flow , this is helpful in case you want to maintain a position: absolute next to its sibling like a tool tip would, and manipulate it with margin property, let say:

margin-top:-40px;
margin-left:30px;

but if you set any (top,left,right, bottom), this will reset the default position and will be relative to the parent.

top:0

Why is an absolutely positioned element placed by its sibling instead of at the top corner of the page?

I always thought that absolute positioned elements are out of the flow.

Yes, they are removed from normal flow.

I don't understand why absolute positioned element appeared after child_static div.

Just because absolute positioning removes elements from normal flow, it doesn't mean it does alter the position of the elements as well.

In other words, absolutely positioned elements would be at the same place as they are not positioned absolutely unless their top, left, ... offsets are set.

So what happens is that they would overlap next sibling elements, because they are not part of document flow anymore.

For instance have a look at the following example where the gold <div> element is covered by absolutely positioned element.

.parent {    position: relative;}
.child_static {    height: 20px;    background: blue;}
.child_absolute {    position: absolute;    height: 20px;    width: 100%;    background: green;}
.child_static ~ .child_static {    background: gold;}

<div class='parent'>    <div class='child_static'>Green</div>    <div class='child_absolute'>Blue</div>    <div class='child_static'>Gold</div></div>