Question

我为excercising创建了一个小的演示页面。我遇到了这个小问题，标题中心有一个牛头图像（id： #logoCenter ）。

我尝试将其放在所有内容之上，但边框位于其上方，即使图片#logoCenter的{{1}} 100 且边框也是如此有z-index 10 ？我很困惑，希望有人可以帮我解决这个小问题。

＆＃13;

z-index

＆＃13;

/* - - - 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;
}

＆＃13;

注意：stackoverflow上的示例已损坏（似乎SO无法处理引导程序），请检查jsfiddle而不是。

Answer 1

解决方案

将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中的图像之前。

HTML＆amp; CSS |边框忽略z-index

1 个答案:

解决方案

为什么会这样？