Html 菜单栏上的徽标图像覆盖，在菜单栏上方和下方突出

我有一个高度为20px的菜单栏，我的徽标是150x150px。 我想垂直对齐我的徽标，使其在菜单栏的顶部和下方突出。因此，在我的菜单栏上方65px，在我的菜单栏下方65px。现在，我的菜单栏高度随着我的徽标图像的高度相应地调整，因此菜单栏完全从20px扩展到150px。由于徽标是菜单栏的一部分，但也不是以某种方式，是否有可能实现我的目标？

拨弄

HTML:

---

通过研究你的问题，我可以设计这个JSFIDLE。希望这就是你想要的

您必须在logo div上使用绝对位置，这样就不会影响菜单高度

#nav{  margin: 65px 0;}
.menu-container{  min-height: 20px;
  position: relative;}
.navbar-brand{  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -75px;}

试试这个

.menu容器{
背景色：#000000；
}
.navbar品牌{位置：绝对；边际顶部：-60px；}
.导航栏倒塌{
边缘顶部：100px；
左边距：120像素；
颜色：#fff；
}
#导航词缀{
位置：固定；
排名：0；
宽度：100%；
z指数：10
}
#侧边栏。粘贴到顶部{
位置：静态
}
#侧边栏{
位置：固定；
顶部：80px
}

家

像这样的东西？很难说清楚你想要实现什么。代码有点草率，但这应该可以做到

CSS

HTML

家


关于


联系

例如：

---

请告诉我您的确切要求，我无法理解它需要如何定位？？是否有任何示例屏幕截图it@SaiDeepak-Hi Sai-为了更好地解释，我添加了一张图片。请注意，当向下滚动时，我的菜单会附加到顶部，因此徽标图像必须是该功能的一部分。无法打开链接抱歉给您带来不便。。。现在尝试链接谢谢，但是当我向下滚动菜单栏并将其粘贴到顶部时，菜单栏上方的徽标部分会被剪裁并消失。如何修复这样的问题，当向下滚动整个徽标（包括顶部）时，始终显示？实际上，我发布的任何代码都会起作用。。它不会剪裁徽标和菜单栏…谢谢，但当我向下滚动，菜单栏粘贴到顶部时，菜单栏上方的徽标部分会被剪裁并消失。如何修复这样的问题，当向下滚动时，整个徽标（包括顶部）始终显示？谢谢，但当我向下滚动，菜单栏粘贴到顶部时，菜单栏上方的徽标部分会被剪掉并消失。如何解决这个问题，以便在向下滚动整个徽标（包括顶部）时始终显示？在这种情况下，请尝试这种方式#导航{位置：固定；最小高度：20px；/*位置：相对；*/宽度：100%；边距：65px 0；背景：#000；}。导航栏品牌{显示：内联块；位置：绝对；顶部：50%；边距顶部：-75px；}删除。从itThanks中删除主容器样式，David。很抱歉，你是对的，我把代码删减到了必要的程度。你的解决方案可行，但你知道如果我向下滚动，菜单粘贴到顶部，菜单栏上方的徽标部分不会被剪裁，因此消失（这是我的徽标消失的一半）？基本上，我希望当我的菜单栏粘贴到顶部时，整个徽标都粘贴到顶部。你知道我的意思吗？哦，我明白了。您想将徽标和导航条都粘贴到顶部吗？所以你真的设想了两种“状态”。一种状态是徽标和导航条都粘贴在顶部，另一种状态是徽标仍然粘贴在顶部，但导航条位于徽标的中心？您的插图处于较晚的状态。请再次检查代码笔。它是可滚动的，没错！你搞定了，太棒了！非常感谢。

.menu-container {
    background-color:#000000;
}

#nav.affix {
    position:fixed;
    top:0;
    width:100%;
    z-index:10
}

#sidebar.affix-top {
    position:static
}

#sidebar.affix {
    position:fixed;
    top:80px
}

#nav {
    position:fixed;
    top:65px;
    width:100%;
    z-index:10;
    height:20px;
    background-color:#000000;
 }  

#nav img{
     position:fixed;
     top:0px;
 }

#nav{  margin: 65px 0;}
.menu-container{  min-height: 20px;
  position: relative;}
.navbar-brand{  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -75px;}

html,body{
  margin:0;
  background:#ccc;
}
#cont{
  position:relative;
  width:100%;
  height:150px;
  background:transparent;
}
ul{
  position:relative;
  top:65px;
  width:100%;
  height:20px;
  background:#444;
  margin:0;
  padding:0;
}
li:first-child{
  /*to adjust left spaceing*/
  margin-left:50px;
}
li{
  position:relative;
  display:inline-block;
  top:0;
  width:150px;
  height:20px;
  background:#333;
  line-height:20px;
  text-align:center;
  padding:0;
  margin:0;
}

.elem{
  position:absolute;
  top:0;
  width:100%;
  height:20px;
  background:#333;
}

.logo{
  top:-65px !important;
  height:150px !important;
  line-height:150px;
  overflow:hidden;
}

.elem:hover{
  top:-65px !important;
  height:150px !important;
  line-height:150px;  
}

<div id="cont">
  <ul id="bar">
     <li>
       <div class="elem logo">
         <img src="http://www.battleoftastings.com/wp-content/uploads/2013/03/seafood-placeholder150x150px.png"/>
       </div>
     </li>
     <li>
       <div class="elem">
         Home
       </div>
     </li>
     <li>
       <div class="elem">
        About
       </div>
     </li>
     <li>
       <div class="elem">
        Contact
       </div>
     </li>
  </ul>
</div>