作者:mobiledu2502923007 | 来源:互联网 | 2023-10-12 14:10
设置position:absolute后,未脱离文档流,导致写导航下拉菜单时,下拉内容无法完全展开
以下为导航上触发下拉内容的菜单和下拉框的html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| .user-login{
//width:24px;
//height:24px;
display:block;
position:relative;
z-index: 10;
&:hover{
.user-menu{
display:block;
}
}
.userPic{
width:24px;
height:24px;
margin-top:20px;
border-radius: 5px;
cursor:pointer;
}
.user-menu{
display:none;
position:absolute;
left:0;
top:0;
width:158px;
height:130px;
z-index: 20;
background-color:#111;
}
} |
下图分别为鼠标悬浮的触发元素和触发后的效果。正常情况下,触发后的黑色下拉框应该脱离文档流,完整呈现出来,而不是局限在了父元素中。有网友直接复制我的代码进行了测试,是正常的。不知道和我用了webpack的模板进入的导航是否有关,
1
| <%= require('html-loader!./layout/nav.html') %> |
下图是chrmoe控制台中的部分样式