html - 下拉标题问题

Question

您好，我有 2 个 header ，如下所示:

当我单击通知按钮时，下拉菜单似乎破坏了页眉布局。以下是截图

通知下拉CSS如下

#notification_dropdown {
-webkit-box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
-moz-box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
background: white;
border: solid #888888 1px;
left: 300px;
width: 380px;
display: none;
float: left;
color: #444444;
}

我做错了什么？

Answer 1

添加相对于其父级的位置和相对于自身的绝对位置。通过这样做，它将进入布局分层，并且不会破坏您现有的布局。

像添加绝对位置一样

 #notification_dropdown {
position:absolute;
z-index:1;
}

并添加相对于其父级的位置

parent_0f_dropdown
{
position:relative;
}