如何将绝对定位元素置于另一个元素中心下方的中心？
. <-- Center
[ . ] <-- Not absolutely positioned element,a button. Always displayed
[ . ] <-- Absolutely positioned element. Visibility toggled by button
编辑：为了说清楚,我正在寻找的是一种简单的方法,使元素的中心对齐.
解决方法
有不同的方法可以做到这一点,但我发现最简单的方法是对abolute定位元素执行以下操作：
top: 0; left: 50%; transform: translateX(-50%);
使用此方法,您无需知道任何元素的大小.
它是如何工作的？
左边：50％将它放在祖先元素的中间(这里100％是祖先元素的大小).
变换：translateX(-50％)使绝对定位元素的中心到达左角的位置(此处100％是绝对定位元素的宽度).
为了使这项工作,父元素与按钮具有相同的宽度也很重要.我使用了一个父元素来包含按钮和aboslutely定位元素i,以便top：0直接位于按钮下方.
简化的html：
<span class="container">
<div class="button">Click Me!</div>
<div class="relative">
<div class="absolute">Absolute positioned</div>
</div>
</span>
简化为less / scss
.container {
display: inline-block;
.button { ... }
.relative {
position: relative;
.absolute {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
