CSS定位绝对与相对

Question

我的HTML中有一个<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;
}

但是，如果在标记之前有内容，则子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>
}