CSS 位置 absolute/relative 更改外部 div 对齐方式

Question

有人能解释一下为什么红色 div 容器 ("Label") 在底部对齐，绝对位置作为内部容器，如果相对位置在顶部。为什么会影响内部 div 容器和外部 div 容器？

<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

Answer 1

之前已经回答过：

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

这是因为垂直对齐默认设置为基线。您可以通过将其设置为顶部来解决您的问题：

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

原始答案归功于 wakooka

Answer 2

原因是，display: inline-block项目被视为位于一个行（如文本），默认情况下它们的文本内容（更准确地说：last line 他们的文本，至少只要它还在容器内）在底部对齐。

当您将第三个 DIV position 更改为 absolute 时，其文本将独立于 parent DIV，而不是块本身在parentDIV的左上角。由于现在第二个DIV中没有直接"real text"，所以第二个DIV的底部与文本的基线对齐（不确定这个英文表达方式）首先 DIV.

Answer 3

一个'inline-block'的基线是它在正常流中最后一个行框的基线。在这种情况下，基线是底部边距。要更改它，请添加 vertical-align:top;标签：

  <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>

CSS 位置 absolute/relative 更改外部 div 对齐方式

CSS position absolute/relative change outer div alignment

html

css

css-position