3

can someone explain me the reason why the red div container ("Label") is aligned at the bottom with position absolute as inner container and in case with position relative on the top. Why affect an inner div container an outer div container?

<div>
  <div style="position: relative; display:inline-block; height:auto; background: red">Label</div>
  <div style="position: relative; display:inline-block; height:100px; width:100px; background: blue">
  <div style="position: absolute; height: 20px; width: 20px">XXXX</div>
</div>

With inner div position absolute

<div>
   <div style="position: relative; display:inline-block; height:auto; background: red">
      Label
   </div>
   <div style="position: relative; display:inline-block; height:100px; width:100px; background: blue">
      <div style="position: relative; height: 20px; width: 20px">XXXX</div>
   </div>

With inner div position relative

Mohammad
  • 3,449
  • 6
  • 48
  • 75
abc2016
  • 33
  • 1
  • 3

3 Answers3

3

The reason is, that display: inline-blockitems are treated as being positioned on one line (like text), per default their text content (more precisely: the last line of their text, at least as long as this is still inside the container) being aligned at the bottom.

When you change the third's DIV position to absolute, its text becomes independent from the parent DIV, instead the block itself is put in the top left corner of the parent DIV. Since now there is no "real text" directly in the second DIV, the bottom of the second DIV is aligned with the base line of the text (not sure about this expression in English) of the first DIV.

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

This has been answered before:

Why does an inline-block div get positioned lower when it has content? [duplicate]

This is because vertical-align is by default set to baseline. You can fix your problem by setting it to top :

div {
display:inline-block;
margin-:2px;
height:100px;
width:25px;
border:1px solid black;
vertical-align: top;
}​

Credit to wakooka for the original answer

Community
  • 1
  • 1
5202456
  • 966
  • 14
  • 24
0

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow. In this case the baseline is the bottom margin edge. To change that, add a vertical-align:top; to label:

  <div style="position: relative; display: inline-block; height: auto; background: red none repeat scroll 0% 0%; vertical-align: top;">Label</div>
<div style="position: relative; display:inline-block; height:100px; width:100px; background: blue">
  <div style="position: absolute; height: 20px; width: 20px">XXXX</div>
</div>
Bipbip
  • 184
  • 8