我为excercising创建了一个小的演示页面。我遇到了这个小问题,标题中心有一个牛头图像(id: #logoCenter )。
我尝试将其放在所有内容之上,但边框位于其上方,即使图片#logoCenter
的{{1}} 100 且边框也是如此有z-index
10 ?我很困惑,希望有人可以帮我解决这个小问题。
z-index

/* - - - Header - - - - - - - - - - - - - - - - - - - - - - */
.content {
margin: 0 auto;
padding-top:120px;
padding-bottom: 90px;
transition: 0.3s;
}
.center{
width: 50%;
margin: 0 auto;
}
.centerText{
width: 50%;
margin: 0 auto;
}
#headerContainer {
position: relative;
padding: 0;
margin: 0;
}
#headerMainContainer {
position: fixed;
z-index: 10;
height: 65px;
background-color: white;
padding: 0;
margin: 0;
width: 100%;
font-size: 22px;
}
#logoCenter {
width: 120px;
z-index: 100;
}
#transparentBorder {
height: 72px;
z-index: 10;
width: 100%;
border-bottom: 15px solid rgba(0,0,0, 0.78);
border-radius: 0 0 100px 100px;
padding: 0;
margin: 0;
position: fixed;
}
.header {
position: absolute;
}
#headerLeft {
}
#headerCenter {
}
#headerRight {
}
.headerTitle {
margin-top: 20px;
font-size: 20px;
overflow: visible;
}
.FooterTitle {
margin: 0px;
padding: 10px;
}
.FooterContainer{
color: white;
text-align: center;
padding-top: 10px;
background-color: black;
width: 100%;
bottom: 0px;
padding-bottom: 10px;
}
.FooterButton{
color: #d4d4d4;
font-size: 20px;
text-decoration: none;
margin-left: 20px;
}
.FooterButton:hover{
color: white;
}

注意:stackoverflow上的示例已损坏(似乎SO无法处理引导程序),请检查jsfiddle而不是。
答案 0 :(得分:2)
position:relative
添加到#logoCenter
类; <div id="transparentBorder"></div>
,使其位于ID为headerContainer
z-index
只是改变前景和背景中哪些元素的一种方式。虽然由于z-index
,您的元素应位于顶部,但此处还有其他一些因素在起作用。
transparentBorder
的样式为position:fixed
。具有这种位置样式的元素通常出现在其他元素之上 - 请参阅z-index not working with fixed positioning。
为确保我们的图片始终显示在顶部,我们为其指定position:relative
样式。这意味着它具有位置风格,但实际上不会改变它的位置,除非我们提供left
和right
样式(我们不会)。
但是,您的图片仍然不会显示在顶部。这是因为HTML中的元素会进一步显示在元素之上。通常z-index
或position
处理此问题,position:fixed
仍然超过您的图像(这是最强的位置属性)。因此,我们需要确保将行放在HTML中的图像之前。