CODEWITHSUNDEEP
csspositionabsolutesiblings
Chan Kwon
Chan Kwon

Reputation: 29

Absolute position looks to its closest ancestor, does it care about siblings?

Summary: Does an absolutely positioned element care about its siblings under any circumstance (Whether the siblings are relative, absolute, static) ?

My understanding was that absolute positioning ignores siblings.

.absoluteBox {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: yellow;
  border: 1px solid red;
  box-sizing: border-box;
  top: 0;
  /* 
why is top 0 necessary?
If i do not set it, the inner yellow box will position itself after the grey box
The grey box has no position property assigned to it, and even if it did, it should not matter
  -- because the inner-absolute box should just be looking to its ancestor for its position
*/
}

.greyBox {
  display: flex;
  height: 20px;
  width: 50px;
  background-color: grey;
}
<div class="absoluteBox">
  outer yellow box
  <div class="greyBox"></div>
  <div class="absoluteBox">
    inner yellow box should completely fill up screen
  </div>
</div>

I have a container ("Outer-Container"). Absolute position, 100% x 100% width and height. It takes up the whole screen in the jsFiddle as it should.

I put a child into "Outer-Container", no position related properties. ("greyBox" in the fiddle).

I then put another Absolute 100x100 div inside the "Outer-Container". Call this "Inner-Container."

PROBLEM: Why does the Inner-Container position itself after the greyBox? It should ignore siblings, be taken out of the normal "flow" of positioning, and just look to its closest positioned ancestor (Outer-Container) when determining its position.

Upvotes: 2

Views: 1114

Answers (2)

Brett DeWoody
Brett DeWoody

Reputation: 62743

If top, right, bottom, or left properties are NOT defined on a position: absolute element, the element will be positioned according to its location in the HTML.

So the position: absolute element cares about its preceding siblings in that it will use the preceding siblings to determine its position in the layout.

But the position: absolute element DOES effect the layout of succeeding siblings, and the size of the position: absolute element's parent.

Succeeding siblings of the position: absolute element will ignore it and position themselves as if the position: absolute element is not present.

And the position: absolute element's parent will not preserve space for any absolute children. So even if the absolute element is larger than its parent, the parent will not grow to contain the absolute element.

.absoluteBox {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: rgba(255, 255, 0, 0.5);
  border: 1px solid red;
  box-sizing: border-box;
}

.absoluteBox2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 0, 0.5);
  border: 1px solid red;
  box-sizing: border-box;
}

.greyBox {
  display: flex;
  height: 20px;
  width: 50px;
  background-color: grey;
}
<div class="absoluteBox">
  outer yellow box
  <div class="greyBox"></div>
  <div class="absoluteBox2">
    inner yellow box should completely fill up screen
  </div>
  <div class="greyBox"></div>
</div>

Upvotes: 2

Xhynk
Xhynk

Reputation: 13840

Check this out: https://www.w3.org/TR/css-position-3/#abs-non-replaced-height

Removing the fluff, you see specs like "If top and bottom are auto and height is not auto, then set top to the static position, then solve for bottom."

What this means is that it defaults to it's position: static values, which is what you see since it has no inherited or explicit reference. Brett defined this pretty well actually. The position: static values are from where the element is originally drawn - so preceding children are taken into account to calculate the position: static value, but proceeding children are not, and get placed as if the absolute element doesn't exist in the DOM flow.

A bit tedious, but there's a bunch of CSS spec rules that make even less sense (opacity affecting z-index for instance, or the fact that percentage based vertical padding is relative to it's parent element's width not height...)

Upvotes: 0

Related Questions