不能移动分区位置而不破坏包含H2的位置

Question

我有一个div，其中包含用户用户名。当用户将鼠标悬停在上面时，我有一个面板向下移动。我无法定位div，这样它就可以填充用户名框，而不会混淆H2用户名。

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

这看起来很简单，但这只是让我发疯。这里是一个jsfiddle - https://jsfiddle.net/xksbr73u/1/。

HTML

<div id = "user-container">
        <div class = "dropdown-login-handler">
                <h2 id = "user-name">
          Guest 1
                </h2>
            <div class = "dropdown-login-panel">
                    <div id = "login-screen">

                    </div>
                </div>
        </div >
</div>

<div id = "dont-push"></div>

CSS

    #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;
}

最终的结果，我想看起来像这样

​

但是，当鼠标进入盒子的任何位置时，面板也就会出现(处理程序不会从盒子外面溢出，或者不在某些部分)。

Answer 1

您设置了太多不必要的值。我所做的大部分只是清理你的毛边和垫子。然后，我把你的h2和它的父母的高度相匹配，清理毛边。

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

https://jsfiddle.net/m2q9bv45/