子 Div 的相对位置推动其他父按钮答案

【问题标题】：Position Relative of Child Div pushes other Parent Buttons子 Div 的相对位置推动其他父按钮
【发布时间】：2013-04-04 23:42:55
【问题描述】：

（我真的不知道如何命名。无论如何！）

我有几个垂直堆叠的 HTML 按钮，我认为它们是父级。当您将鼠标悬停在按钮上时，按钮右侧会出现一个 div（或子级别）。为了强制 div 向右，我使用 position:relative;...

position:relative;
top:-25px;
left:200px;

但是悬停按钮下方的按钮被按下，就像按钮下方存在的 div 一样。

如何在不按下按钮的情况下显示子 div，同时保持父按钮和子 div 的顶部对齐？

这里以 jsfiddle 为例：http://jsfiddle.net/8Mbyu/

【问题讨论】：

标签： css position css-position

【解决方案1】：

您反对使用绝对定位还是可以？ jsFiddle这里。

.hiddenButtons { /*blue div*/
    display:none;
    background:#0af;
    width:100px;
    padding:5px;
    text-align:center;
    position:absolute;
    top:9px;
    left:210px;
}

【讨论】：

我不反对，但我希望父按钮的顶部和子div的顶部对齐。我将编辑我的问题。
您的绝对评论给了我一个想法，我找到了解决方案。
@StoneRanger 真的吗？伟大的！你最后做了什么？

【解决方案2】：

经过一夜的思考，我想我可以结合使用绝对定位以及通过 javascript 获取父按钮的位置：

实际操作中：http://jsfiddle.net/8Mbyu/8/

.hiddenButtons { /*blue div*/
    display:none;
    background:#0af;
    width:100px;
    padding:5px;
    text-align:center;
    position:absolute;
    left:210px;
}

还有 javascript：

$('.parentButton').hover(function () {
    $('.hiddenButtons').hide();
    var childID = '#' + this.id + 'Child';
    var rect = document.getElementById(this.id).getBoundingClientRect();
    var top = rect.top;
    $(childID).css("top", top+1);
    $(childID).show();
});

谢谢https://stackoverflow.com/a/11396681/1178486！

我愿意看到更清洁的解决方案。

【讨论】：