Question

如果您想直接跳转到正常工作的代码，请参阅here。

我试图了解为什么下面的三个.inline元素

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

当我将position元素的.child属性从relative切换为absolute ^{1时， ...变为垂直未对齐

与此问题相关的其他CSS设置如下：

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

.parent {
display: inline-block;
}

更重要的是，在链接的example中采用所有其他显式CSS设置，作为给定，如何使用垂直.inline.parent元素（即带有绝对定位的孩子）与侧翼的孩子对齐？

编辑：我对代码做了一些小改动，以强调所有.inline元素对relative属性具有相同的设置（position）。我也相应改变了链接的例子。

^{¹请注意，此更改不引用任何.inline元素，而是引用其中一个元素的后代。}}

Answer 1

取自：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

绝对。这是一种非常强大的定位类型，可以让您从字面上将任何页面元素准确放置在您想要的位置。你用定位属性顶部，左下角和右侧设置地点。请记住，这些值将与下一个值相关具有相对（或绝对）定位的父元素。如果没有这样的父，它将默认一直回到元素本身意味着它将相对于页面本身放置。

简而言之，子元素将获取其父元素的值，该元素具有相对属性。要解决此问题，您可以将.inline添加到d6 = d0 OR d6课程。

Answer 2

仅拥有属性display: inline-block不会对齐元素。与所述的其他答案一样，您必须设置vertical-align属性才能操纵元素的对齐。

因此，将元素设置为，让我们说bottom可以解决问题，或者其他任何方法。

请注意，在您的情况下，middle不是最佳选择。

至于为什么它与绝对值不相同的确切原因我不得不说它是因为元素是由它们彼此的关系定义的，以及它们对应的嵌套元素的属性。现在当你把它们中的一些设置为position: absolute;时，该元素与它的父元素的关系变得......“丢失”（不是最好的单词/描述）。

绝对定位的孩子的父母

2 个答案: