html - CSS:内联父级，绝对子级 - 意外行为

Question

抱歉，如果这个问题已经得到回答，我已经搜索过但找不到答案。

我在将绝对定位元素保留在其父元素内时遇到问题。

例如，以下内容在父级没有 display: inline;

的情况下工作

<div class="container">
  <div class="bottom">...</div>
  <div class="top">...</div>
</div>
<div class="container">
  ...
</div>

和

.container {
  position: relative; 
}
.bottom {
  position: relative;
  z-index: 998;
}
.top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

显然，容器元素将垂直显示在彼此之上，而目的是让它们并排放置。将 display:inline; 添加到 #container 元素可通过并排显示容器元素来“修复”此问题。

但是，当 display:inline; 被添加到父级时，它会导致具有 position:absolute; 的 .top 元素失去对齐并出现在预期位置下方。我觉得我做错了一些相当简单的事情，但我很难过。非常感谢任何帮助或指导。

Answer 1

回答问题，因为它可能对遇到确切问题的人有所帮助。

您必须对 .container div 使用 display:inline-block; css 属性。

Elements with display:inline-block elements are like display:inline elements, but they can have a width and height.

Extracted from W3Schools: inline-block displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box