css - 无法让网站标题/页眉位于页面其余内容之上

Question

我想弄清楚如何使导航中的站点标题( Logo )位于所有内容之上并悬卡在导航栏下方 - 因此 Logo 的一半将位于导航栏中，另一半将挂起以下。我尝试在几个地方使用 z-index 但它没有做任何事情。还有一个收缩功能，我也必须通过。当您向下滚动时，导航栏会缩小，我希望 Logo 仍悬卡在导航栏下方。

这是链接:http://www.mrsteamers.com/

.header-image .site-title > a {
float: left;
min-height: 80px;
width: 100%;
}
.site-header {
background-color: #13afdf;
position: fixed;
width: 100%;
height: auto;
z-index: 999;
}

.site-header .wrap {
min-height: 160px;
}

.bumper {
min-height: 160px;

}

.site-header .wrap {
padding: 40px;
max-width: 100%;
}

.site-header.shrink .wrap {
background-color: rgba(255, 255, 255, 0.1);
min-height: 60px;
padding: 0 40px;
}

.shrink .site-title {
font-size: 36px;
padding-top: 10px;
}

.header-image .shrink .site-title {
padding: 0;
}

.header-image .shrink .site-title > a {
min-height: 60px;
}

.shrink .site-title a {
z-index: 99;
}

.site-header.shrink .widget-area {
padding-top: 0;
}

抱歉所有代码，但我不知道应该在哪里修复它。

Answer 1

使用absolute positioning在 Logo 容器上将其放置在您想要的位置。更改 top, bottom, left, right 参数以设置 Logo 容器相对于其父容器的偏移量。

尝试进行以下更改，看看绝对定位如何帮助定位元素。

.site-header .wrap{
  position:relative;
}

.site-header .title-area{
  position:absolute;
  bottom:-35px;
}
//Remove the below styling
.header-image .shrink .site-title > a {
min-height: 60px;
}