Question

我想弄清楚如何让导航中的网站标题（徽标）位于所有内容的顶部并悬挂在导航栏下方 - 因此徽标的一半将位于导航栏中，另一半将挂起下面。我尝试在几个地方使用z-index，但它没有做任何事情。还有一个收缩功能，我必须过去。向下滚动时，导航栏会缩小，我希望徽标仍悬挂在导航栏下方。

以下是链接：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将其放置在您想要的位置。更改top, bottom, left, right参数以设置徽标容器相对于其父容器的偏移量。

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

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

无法将网站标题/标题放在页面上其他内容的顶部

1 个答案: