CSS定位绝对定位与相对定位

Question

我在我的超文本标记语言中有一个<a>标记，当用户单击链接时，我需要一个下拉列表来始终显示在下面。如果不使用click事件，它看起来如下所示：

HTML

<a class="parent">Learn more</a>
<div class="child">This is the stuff for learning more</div>

CSS

.parent {
  position: relative;
}
.child {
  position: absolute;
}

但是，如果a标记之前有内容，则子div不会与<a>标记对齐。

我如何确保下拉菜单总是出现在<a>标签下面，即使它之前有内容？

Answer 1

不能用你在那里的代码。

当涉及到相对/绝对定位时，您遗漏了一些东西。为了使绝对定位的元素与相对定位的元素对齐，相对元素需要是父元素。那不是父母，是兄弟姐妹，不会起作用。

要解决这个问题，你必须以某种方式重新思考。您可以使用javascript始终将元素与链接对齐，也可以将整个部分封装在类似于另一个div的内容中，如下所示：

<div class="parent">
  <a>Learn more</a>
  <div class="child">This is the stuff for learning more</div>
</div>

和CSS类似的东西：

.parent {
  position: relative;
}
.child {
  position: absolute;
  margin-top: 1.5em; // to clear the <a>
}