简体   繁体   English

CSS在固定标题上方显示内容

[英]css displaying content above fixed header

How can I display content above my fixed header? 如何在固定标题上方显示内容?

I simply want to create a 'outer header' above my main navigation header that displays a few links to social sites. 我只想在主导航标题上方创建一个“外部标题”,以显示一些指向社交网站的链接。

I've created the HTML markup but I can't translate this visually using CSS. 我已经创建了HTML标记,但是无法使用CSS直观地进行翻译。

Below is the code - or check out this codepen . 下面是代码-或查看此Codepen

Essentially, I want the social ul with list items 1,2,3 & 4 to be above the global nav 本质上,我希望social ul with list items 1,2,3 & 4social ul with list items 1,2,3 & 4高于全球资产净值

 * { box-sizing: border-box; } ul, ol { list-style: none; margin: 0px; padding: 0px; } .header { position: fixed; width: 100%; top: 0; border-bottom: 1px solid #ddd; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .menu li { padding-right: 50px; margin-right: 20px; } .header .menu ul { margin: 0; padding: 0; } .header .menu ul li { display: inline-block; list-style: none; } .header .menu ul li a { text-decoration: none; display: block; padding: 30px 20px; } 
 <div id="global-social" class="outer-header col-1"> <div class="container"> <nav> <ul class="social"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </nav> </div> </div> <div id="global-navigation"> <!-- Global Header --> <header class="header"> <div class="logo"> <a href=""> <!--<img src="images/rare-logo.png">--> <h1>Rare Select</h1> </a> </div> <nav class="menu"> <ul> <li><a href="">HOME</a></li> </ul> </nav> </header> </div> 

If you want both menus to stay fixed I'd suggest wrapping them both in a new container (in the snippet below I've given this a class wrapper ). 如果您希望两个菜单都保持不变,建议将它们都包装在一个新容器中(在下面的代码段中,我给了它一个类wrapper )。

Add the position property to this class instead. 而是将position属性添加到此类。

 * { box-sizing: border-box; } .wrapper { position: fixed; width: 100%; top: 0; border-bottom: 1px solid #ddd; } ul, ol { list-style: none; margin: 0px; padding: 0px; } .header { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .menu li { padding-right: 50px; margin-right: 20px; } .header .menu ul { margin: 0; padding: 0; } .header .menu ul li { display: inline-block; list-style: none; } .header .menu ul li a { text-decoration: none; display: block; padding: 30px 20px; } 
 <div class="wrapper"> <div id="global-social" class="outer-header col-1"> <div class="container"> <nav> <ul class="social"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </nav> </div> </div> <div id="global-navigation"> <!-- Global Header --> <header class="header"> <div class="logo"> <a href=""> <!--<img src="images/rare-logo.png">--> <h1>Rare Select</h1> </a> </div> <nav class="menu"> <ul> <li><a href="">HOME</a></li> </ul> </nav> </header> </div> </div> 

Your header is using a fixed position so I would advise moving the header down equal to it's height (provided the height doesn't change) EG 80px in this case. 您的标头使用的是fixed位置,因此在这种情况下,我建议将标头向下移动等于其高度(假设高度不变)。

.header {
    top: 80px;
}

 * { box-sizing: border-box; } ul, ol { list-style: none; margin: 0px; padding: 0px; } .header { position: fixed; width: 100%; top: 80px; border-bottom: 1px solid #ddd; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .menu li { padding-right: 50px; margin-right: 20px; } .header .menu ul { margin: 0; padding: 0; } .header .menu ul li { display: inline-block; list-style: none; } .header .menu ul li a { text-decoration: none; display: block; padding: 30px 20px; } 
 <div id="global-social" class="outer-header col-1"> <div class="container"> <nav> <ul class="social"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </nav> </div> </div> <div id="global-navigation"> <!-- Global Header --> <header class="header"> <div class="logo"> <a href=""> <!--<img src="images/rare-logo.png">--> <h1>Rare Select</h1> </a> </div> <nav class="menu"> <ul> <li><a href="">HOME</a></li> </ul> </nav> </header> </div> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM