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/

无法移动Div位置而不会弄乱包含H2的位置

1 个答案: