html – 导航栏外的溢出徽标

html – 导航栏外的溢出徽标,第1张

概述我已经尝试了溢出-y:在css中可见,但徽标仍然可以切割,我想它与身体有关,因为在所有其他页面中,徽标显示为我想要的. <div class="nav-logo"> <img class="lightup-logo" src="image/logo.png" alt=""/></div> .nav-logo { float: left; overflow-y: visible;

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

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

从侧面说明,徽标在所有其他页面中按预期工作,它很好地溢出,它只是在问题似乎出现的索引页面中.

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

<header>    <div >      <div >         <img  src="image/logo.png" alt=""/>        </div>    </div>    </header>    <main>    <div >    <div ></div>    <div ></div>    </div>    </main>header {    padding: 0px;    margin: 0px;    background: rgba(31,34,36,1);background: -moz-linear-gradIEnt(left,rgba(31,1) 0%,rgba(0,1) 25%,1) 50%,1) 77%,1) 100%);background: -webkit-gradIEnt(left top,right top,color-stop(0%,1)),color-stop(25%,color-stop(50%,color-stop(77%,color-stop(100%,1)));background: -webkit-linear-gradIEnt(left,1) 100%);background: -o-linear-gradIEnt(left,1) 100%);background: -ms-linear-gradIEnt(left,1) 100%);background: linear-gradIEnt(to right,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不起作用的原因是因为你试图在一个位置上使用它:静态元素.它仅适用于静态以外位置的元素.

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

总结

以上是内存溢出为你收集整理的html – 导航栏外的溢出徽标全部内容,希望文章能够帮你解决html – 导航栏外的溢出徽标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1056460.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存