Html 不能移动Div位置而不弄乱包含H2的位置

我有一个包含用户用户名的div。当用户将鼠标悬停在上方时，我会看到一个下拉面板。我无法定位div，以便它填充用户名框而不弄乱H2用户名

在我的css中，我有一个H2标签，它需要在网站上的其他H2文本中，所以我需要在用户名id中定位以覆盖它。总的来说，我需要它，以便登录处理程序填充框，登录面板显示在框的底部，H2垂直和水平位于中心

这看起来很简单，但它只是让我发疯。这是一个JSFIDLE-

HTML

最终的结果我希望看起来像这样

---

但是，当鼠标进入框中的任何位置时，面板也会出现（处理程序不会溢出框外或不在某些部分）

您设置了太多不必要的值。我所做的大部分只是清理你的边距和填充物。然后，我调整你的

h2

以匹配其父级的高度，并清理边距

#user-name {
    margin: 0;
    line-height: 50px;
}

---

我真的不明白问题出在哪里。你能更新你的提琴吗，这样坏掉的行为就显而易见了？是的，在JSFIDLE中，文本（h2）没有垂直居中，当我尝试这样做时，我弄乱了下拉处理程序和下拉面板。我试着让它的位置绝对化，这就搞乱了所有东西的位置。你能想象出你想要的结果吗？很难想象最终结果应该是什么-这集中了h2：是的，我在问题中添加了一张图片，但重要的是处理者的位置，我不能显示它，因为它是透明的，这是更好的，因为它解决了悬停问题，这是完美的，这就是我想要的tyvm:）

    #user-container {
    width: 250px;
    height: 45px;
    background-color: white;
    border-radius: 3px;
    box-shadow: 2px 2px 5px #5B3A23;
    margin-bottom: 5px;
    padding-top: 5px;
    display: inline-block;
}

.dropdown-login-handler {
    margin: 0 auto;
  height: 50px;
  margin-top: -12px;
}

.dropdown-login-panel {
    background-color: white;
    display: none;
    border: 1px solid #000000;
    border-radius: 2px;
    box-shadow: 1px 1px 5px #5B3A23;
    position: relative;
    width: 248px;
    top: 23px;
    cursor: hand;
    z-index: 999;
    font-family: 'roadstar';
}
.dropdown-login-handler:hover .dropdown-login-panel {
    display: block;
}
#user-name {

}
#login-screen{
  height: 100px;
}

h2 {
    text-align: center;
    position: relative;
    font-family: 'roadstar';
    letter-spacing: 2px;
    margin: 0px;
    margin-top: 7px;
}
#dont-push {
  background-color: green;
  width: 300px;
  height: 300px;
}

#user-name {
    margin: 0;
    line-height: 50px;
}