有人能解释一下为什么红色 div 容器(“标签”)在底部对齐,绝对位置作为内部容器,如果相对位置在顶部。 为什么会影响内部 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>
最佳答案
原因是,display: inline-block
元素被视为位于一行(如文本),默认情况下它们的文本内容(更准确地说:他们文本的最后 行,至少只要它还在容器内)在底部对齐。
当您将第三个 DIV 的 position
更改为 absolute
时,它的文本将独立于父 DIV,而是将 block 本身放在父 DIV 的左上角分区。由于现在第二个DIV中没有直接的“真实文本”,所以第二个DIV的底部与第一个DIV的文本(英文表达不确定)的基线对齐。
关于CSS 位置绝对/相对更改外部 div 对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34269749/