作者：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控制台中的部分样式
京公网安备 11010802041100号