Html H1标题卡在扩展上的边框后面

大家好，我想制作一个标题，显示在

.imageHolder

img标签前面。目前，它位于

.imageHolder

边框后面

.imageHolder

在悬停时展开，然后标题卡在边框后面

我尝试设置

z-index

属性，但似乎不起作用。如果您有任何想法以及缩短代码等方面的选择，我们将不胜感激

//图像滑块Div的Mouseover/out函数
$（函数（）{
$（'.imageSlider'）
.on（'mouseover'，function（）{
$（'.imageHolder'）.addClass（'transition'）；
$（this.addClass（'transition'）；
$（'.btnBack'）.stop（true，true）.fadeIn（00）；
$（'.btnNext'）.stop（true，true）.fadeIn（00）；
})
.on（'mouseout'，function（）{
$（'.imageHolder'）.removeClass（'transition'）；
$（this.removeClass（'transition'）；
$（'.btnNext'）.stop（true，true）.fadeOut（00）；
$（'.btnBack'）。停止（真，真）。淡出（00）；
});
});
//图像滑块上“下一步”按钮的鼠标悬停/退出功能
$（函数（）{
$（“.btnNext”）
.on（'mouseover'，function（）{
$（'.imageHolder'）.addClass（'transition'）；
$（this.addClass（'transition'）；
$（'.btnNext'）.stop（true，true）.fadeIn（00）；
})
.on（'mouseout'，function（）{
$（'.imageHolder'）.removeClass（'transition'）；
$（this.removeClass（'transition'）；
$（'.btnNext'）.stop（true，true）.fadeOut（00）；
});
});
//图像滑块上“后退”按钮的鼠标悬停/退出功能
$（函数（）{
$（“.btnBack”）
.on（'mouseover'，function（）{
$（'.imageHolder'）.addClass（'transition'）；
$（this.addClass（'transition'）；
$（'.btnBack'）.stop（true，true）.fadeIn（00）；
})
.on（'mouseout'，function（）{
$（'.imageHolder'）.removeClass（'transition'）；
$（this.removeClass（'transition'）；
$（'.btnBack'）。停止（真，真）。淡出（00）；
});
});
//用于保存/释放图像的变量
var nextDelay；
var后向延迟；
valueArray=0
图像=[“a.jpg”、“b.jpg”、“c.png”]
//单击/获取阵列中的下一个图像后交换图像的延迟
函数Next（）{
nextDelay=setTimeout（getNext，1400）；
$（'.imageHolder'）.fadeTo（1200，0，'线性'）；
}
函数getNext（）{
$（'imageHolder'）.fadeTo（20,1，'linear'）；
var image=document.getElementsByClassName（'imageHolder'）[0]；
valueArray=valueArray+1；
如果（valueArray>2）
valueArray=0；
image.src=Images[valueArray]；
}
//单击/获取阵列中的最后一个图像后交换图像的延迟
函数Back（）{
backDelay=setTimeout（getLast，700）；
}
函数getLast（）{
var image=document.getElementsByClassName（'imageHolder'）[0]；
valueArray=valueArray-1；
if（valueArray<0）
valueArray=2；
image.src=Images[valueArray]；
}

正文{
/*设置页面背景颜色*/
宽度：100%；
/*设置页面宽度*/
身高：100%；
保证金：0；
填充：0；
背景色：#404040；
}
.过渡{
-webkit转换：规模（2）；
-moz变换：尺度（2）；
-o变换：尺度（2）；
变换：尺度（2）；
}
.imageSlider>.imageHolder{
最大宽度：100%；
最大高度：100%；
-webkit转换：所有.2易入易出；
-moz转换：所有.2秒的输入输出；
-o-转换：所有.2缓进-缓出；
-ms转换：所有.2易入易出；
边框：10px实心#021a40；
}
h1{
利润上限：-10px；
左边距：5px；
背景：白色；
}
.图像滑块{
文本对齐：居中；
宽度：120px；
高度：100px；
利润率：350px；
}
.btnNext{
显示：无；
位置：相对位置；
左：100px；
底部：60px；
大纲：无；
/*停止在用户单击后显示边框*/
}
.btnBack{
显示：无；
位置：相对位置；
右：100px；
底部：60px；
大纲：无；
/*停止在用户单击后显示边框*/
}

主菜单
标题

将

h1

样式更改为：

h1{
  margin-top:-10px;
  margin-left:5px;
  background:white;
  position:relative;
  z-index:2000;
}

为了使

z-index

起作用，您还需要应用

position

属性。将

position

设置为

relative

不会移动页面上的

H1

标记，但允许

z-index

工作

以下是一个示例：

//图像滑块Div的Mouseover/out函数
$（函数（）{
$（'.imageSlider'）
.on（'mouseover'，function（）{
$（'.imageHolder'）.addClass（'transition'）；
$（this.addClass（'transition'）；
$（'.btnBack'）.stop（true，true）.fadeIn（00）；
$（'.btnNext'）.stop（true，true）.fadeIn（00）；
})
.on（'mouseout'，function（）{
$（'.imageHolder'）.removeClass（'transition'）；
$（this.removeClass（'transition'）；
$（'.btnNext'）.stop（true，true）.fadeOut（00）；
$（'.btnBack'）。停止（真，真）。淡出（00）；
});
});
//图像滑块上“下一步”按钮的鼠标悬停/退出功能
$（函数（）{
$（“.btnNext”）
.on（'mouseover'，function（）{
$（'.imageHolder'）.addClass（'transition'）；
$（this.addClass（'transition'）；
$（'.btnNext'）.stop（true，true）.fadeIn（00）；
})
.on（'mouseout'，function（）{
$（'.imageHolder'）.removeClass（'transition'）；
$（this.removeClass（'transition'）；
$（'.btnNext'）.stop（true，true）.fadeOut（00）；
});
});
//图像滑块上“后退”按钮的鼠标悬停/退出功能
$（函数（）{
$（“.btnBack”）
.on（'mouseover'，function（）{
$（'.imageHolder'）.addClass（'transition'）；
$（this.addClass（'transition'）；
$（'.btnBack'）.stop（true，true）.fadeIn（00）；
})
.on（'mouseout'，function（）{
$（'.imageHolder'）.removeClass（'transition'）；
$（this.removeClass（'transition'）；
$（'.btnBack'）。停止（真，真）。淡出（00）；
});
});
//用于保存/释放图像的变量
var nextDelay；
var后向延迟；
valueArray=0
图像=[“a.jpg”、“b.jpg”、“c.png”]
//单击/获取阵列中的下一个图像后交换图像的延迟
函数Next（）{
nextDelay=setTimeout（getNext，1400）；
$（'.imageHolder'）.fadeTo（1200，0，'线性'）；
}
功能