html – 导航栏外的溢出徽标

2023年12月10日 174次阅读

《html – 导航栏外的溢出徽标》

《html – 导航栏外的溢出徽标》

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

 <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中的链接不再起作用.

最佳答案 > screen_styles.css,第48行,删除z-index：5px;. z-index与像素无关.

>将这些规则添加到标题行14：

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

就是这样. z-index不起作用的原因是因为你试图在一个位置上使用它：静态元素.它仅适用于静态以外位置的元素.

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

点赞