CODEWITHSUNDEEP
css
kjo
kjo

Reputation: 35321

Vertical alignment of absolutely positioned child's parent

If you want to jump straightaway to working code, see here.

I'm trying to understand why the three .inline elements below

    <button class="inline">button</button>
    <div class="inline parent"><div class="child">...</div></div>
    <button class="inline">button</button>

...become vertically misaligned when I switch the position property of the .child element from relative to absolute1.

The other CSS settings relevant to this question are these:

.inline {
    box-sizing: border-box;
    width: 85px;
    height: 25px;
    position: relative;
}

.parent {
    display: inline-block;
}

More importantly, taking all the other explicit CSS settings in the linked example, as given, how can I bring the vertically .inline.parent element (i.e. the one with the absolutely positioned child) into alignment with the flanking ones?

EDIT: I made a small change to the code, to emphasize that all the .inline elements have the same setting (relative) for the position property. I also changed linked example accordingly.

1 Note that this change does not make reference to any of the .inline elements, but rather to a descendant of one of them.

Upvotes: 1

Views: 385

Answers (3)

Nemanja Milosavljevic
Nemanja Milosavljevic

Reputation: 1291

Just having a property display: inline-block does not align elements. Like the other answer stated, you have to set the vertical-align property in order to manipulate the element's alignment.

So, setting the elements to, lets say bottom will do the trick, or any other.

Note though that in your case middle would not be the best choice.

As for the exact reason why it doesn't work the same with the absolute and without I'd have to say that it's because elements are defined by their relations to one another, and the properties of their corresponding nested elements. Now when you set some of them to a position: absolute; that element's relation with it's parent gets... "lost" (not the best word/description for it).

Upvotes: 0

Oriol
Oriol

Reputation: 288550

It's because of vertical-align, which default to baseline:

Align the baseline of the box with the baseline of the parent box.

position: absolute produces the problem because

The baseline of an inline-block is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its overflow property has a computed value other than visible, in which case the baseline is the bottom margin edge.

So when you had position: relative, it was an in-flow element. But with position: absolute it becomes out-of-flow.

Therefore, the bottom edge of the absolutely positioned element is aligned with the baseline of the other elements.

Setting vertical-align to some other value, like top, middle or bottom fixes it.

.root {
  margin: 25px;
  padding: 25px;
}
.parent {
  background-color: #ccc;
  border-color: #ccc;
  display: inline-block;
}
#top .child {
  position: relative;
}
#bottom .child {
  position: absolute;
}
.inline {
  width: 85px;
  height: 25px;
  position: relative;
  border-style: solid;
  text-align: center;
  padding-left: 6px 1px;
  box-sizing: border-box;
  font-family: Arial;
  vertical-align: middle;
}
<div class="root" id="top">
  <button class="inline">button</button>
  <div class="inline parent"><div class="child">relative</div></div>
  <button class="inline">button</button>
</div>
<div class="root" id="bottom">
  <button class="inline">button</button>
  <div class="inline parent"><div class="child">absolute</div></div>
  <button class="inline">button</button>
</div>

Upvotes: 4

Stanimir Dimitrov
Stanimir Dimitrov

Reputation: 1890

Taken from: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.

In short, the child element will take the values of it's parent element, which has relative property. To fix this you can add vertical-align: middle; to your .inline class.

Upvotes: 1

Related Questions