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元素＆＃34;修复＆＃34;这通过并排显示容器元素。

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

Answer 1

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

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

display:inline-block元素的元素与display:inline元素类似，但它们可以具有宽度和高度。

从W3Schools中提取： inline-block将元素显示为内联级块容器。此块的内部格式为块级框，元素本身被格式化为内联级框

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

1 个答案: