Question

我已经尝试了溢出-y：在css中可见，但徽标仍然可以切割，我想它与身体有关，因为在所有其他页面中徽标显示为我想要的。< / p>

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

在旁注上，徽标在所有其他页面中按预期工作，它会很好地溢出，它只是在索引页面中，问题似乎就出现了。

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

    <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中，我会得到我想要的结果（徽标溢出），但是body-containers中的链接不再有效。

Answer 1

screen_styles.css，line 48，删除z-index: 5px;。 z-index与像素无关。
将这些规则添加到标题 line 14：

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

就是这样。 z-index无效的原因是您尝试在position:static元素上使用它。它仅适用于position以外static的元素。

你的项目有很多错误，你应该有一个体面的前端开发人员在你发布之前看看它，说得温和。

Answer 2

试试

<div class="nav-logo">
</div>

或者你可以制作logo.png，div的背景

.nav-logo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("image/logo.png");
background-repeat: no-repeat;
background-size: contain;
}

并使用

{{1}}

包含使背景图像填充div并且不会变大。

导航栏外溢出徽标

2 个答案: