html - 导航栏外的溢出 Logo

Question

我已经尝试过 overflow-y: visible in css 但 Logo 仍然被剪掉，我想它与 body 有关，因为在所有其他页面中， Logo 显示我想要的。

 <div class="nav-logo">
 <img class="lightup-logo" src="image/logo.png" alt=""/>
</div>
    .nav-logo {
  float: left;
  overflow-y: visible;
  width: 24%;
  padding: 0px;
  margin: 0px;
  }

请注意， Logo 在所有其他页面中都按预期工作，它很好地溢出，问题似乎只出现在索引页面中。

对于那些正在寻找完整代码示例的人。

    <header>
    <div class="header-container">
      <div class="nav-logo">
         <img class="lightup-logo" src="image/logo.png" alt=""/>
        </div>
    </div>
    </header>
    <main>
    <div class="body-container">
    <div class="large-container"></div>
    <div class="clear"></div>
    </div>
    </main>



header {
    padding: 0px;
    margin: 0px;
    background: rgba(31,34,36,1);
background: -moz-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(31,34,36,1)), color-stop(25%, rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,1)), color-stop(77%, rgba(0,0,0,1)), color-stop(100%, rgba(31,34,36,1)));
background: -webkit-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -o-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -ms-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: linear-gradient(to right, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2224', endColorstr='#1f2224', GradientType=1 );   
}
.nav-logo {
      float: left;
      overflow-y: visible;
      width: 230px;
      height: 100%;
      width: 24%;
      padding: 0px;
      margin: 0px;
  }
.header-container {
    max-width: 1000px;
    margin: auto;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid transparent;
    -webkit-border-image: url(/border.png) 28 stretch; /* Safari 3.1-5 */
    -o-border-image: url(/border.png) 28 stretch; /* Opera 11-12.1 */
    border-image: url(/border.png) 28 stretch;

}
main {
    margin: 0px;
    padding: 0px;
}
 .large-container {
      height: 478px;
      background-image: url(../image/sliced1.png);
  }
.body-container {
    margin: auto;
    max-width: 1000px;
    position: relative;
}

如果我将 z-index: -1 添加到 body-container，我会得到我想要的结果( Logo 溢出)，但是 body-container 中的链接不再有效。

Answer 1

• screen_styles.css，第 48 行，移除 z-index: 5px;。 z-index 与像素无关。
• 将这些规则添加到header第 14 行:

header {
  position: relative;
  z-index: 99;
}

就是这样。 z-index 不起作用的原因是您试图在 position:static 元素上使用它。它仅适用于 position 而非 static 的元素。

您的元素有很多错误，委婉地说，在您启动之前，您应该让一位体面的前端开发人员对其进行检查。