Html 使用属性'；位置'；在CSS中

我正在做一个项目，我遇到了一个问题。 通常在普通屏幕上，当我将头像悬停在搜索栏旁边时，我的工作看起来是这样的：

当我使用小屏幕时会出现问题，当我点击或点击化身时，包含“我的帐户”、“我的愿望列表”和“注销”按钮的“下拉菜单”不会出现：

HTML/CSS代码的外观如下所示（它已被简化为可以很容易地检测到我犯的错误）：

/*化身-下拉菜单*/
.标题用户菜单{
浮动：对；
位置：相对位置；
背景色：#3a3c3e；
宽度：75px；
高度：40px；
边界半径：2px；
}
.标题用户菜单：之前{
内容：''；
宽度：0；
身高：0；
顶部：18px；
左：15px；
位置：绝对位置；
边框：5px实心透明；
边框顶部颜色：#fff；
}
.标题用户菜单ul{
显示：无；
字体：粗体13px Arial，Helvetica，无衬线；
背景色：继承；
列表样式：无；
位置：绝对位置；
文本对齐：居中；
宽度：125px；
顶部：25px；
右：0；
填充：10px；
边界半径：2px；
盒影：02px2pRGBA（0,0,0,0.1）；
框大小：边框框；
}
.标题用户菜单：激活ul，
.标题用户菜单：悬停ul，
.header-user-menu.show ul{
显示：块；
}
.标题用户菜单img{
边界半径：50%；
位置：绝对位置；
顶部：6px；
最大宽度：28px；
右：10px；
}
/*搜索栏*/
.货柜-1{
宽度：250px；
垂直对齐：中间对齐；
空白：nowrap；
位置：相对位置；
浮动：对；
右边距：10px；
}
.container-1输入#搜索{
宽度：250px；
高度：40px；
背景：#3a3c3e；
边界：无；
字号：10pt；
浮动：左；
颜色：#63717f；
左侧填充：45px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}

它出现了，但它在搜索栏的背面。将

z-index

添加到

。标题用户菜单ul

像

我在你的代码片段上得到了这个结果

---

这是由于

.container-1

和

.header用户菜单

元素的

z-index

造成的<代码>z索引适用于定位的图元，并指定图元在z轴上的位置

对于定位框，“z索引”属性指定：

• 当前堆叠上下文中长方体的堆叠级别
• 框是否建立堆叠上下文

指定堆栈级别：“z索引”属性

z-index

生效是因为

.container-1

和

标题用户菜单

已将

位置

设置为

相对

。因为

.container-1

出现在标记的

.header用户菜单

之后，所以

z索引

更高

要修复，您可以删除

位置：相对来自
.container-1
，因为似乎不需要它


/*化身-下拉菜单*/
.标题用户菜单{
浮动：对；
位置：相对位置；
背景色：#3a3c3e；
宽度：75px；
高度：40px；
边界半径：2px；
}
.标题用户菜单：之前{
内容：''；
宽度：0；
身高：0；
顶部：18px；
左：15px；
位置：绝对位置；
边框：5px实心透明；
边框顶部颜色：#fff；
}
.标题用户菜单ul{
显示：无；
字体：粗体13px Arial，Helvetica，无衬线；
背景色：继承；
列表样式：无；
位置：绝对位置；
文本对齐：居中；
宽度：125px；
顶部：25px；
右：0；
填充：10px；
边界半径：2px；
盒影：02px2pRGBA（0,0,0,0.1）；
框大小：边框框；
}
.标题用户菜单：激活ul，
.标题用户菜单：悬停ul，
.header-user-menu.show ul{
显示：块；
}
.标题用户菜单img{
边界半径：50%；
位置：绝对位置；
顶部：6px；
最大宽度：28px；
右：10px；
}
/*搜索栏*/
.货柜-1{
宽度：250px；
垂直对齐：中间对齐；
空白：nowrap；
浮动：对；
右边距：10px；
}
.container-1输入#搜索{
宽度：250px；
高度：40px；
背景：#3a3c3e；
边界：无；
字号：10pt；
浮动：左；
颜色：#63717f；
左侧填充：45px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}









触摸代码片段中的头像会在我的iPhone上显示下拉列表，我是否遗漏了什么？
.header-user-menu ul{
  z-index:999;
}