在标题和内容之间定位导航栏？答案

【问题标题】：Position Navbar between header and content?在标题和内容之间定位导航栏？
【发布时间】：2014-08-26 13:26:14
【问题描述】：

我试图让我的导航栏出现在我的内容和标题之间。当我更改 CSS 上的值时，它要么出现在屏幕顶部，在我的标题/内容后面，要么在标题/内容前面（如果我更改 z-index）我希望它出现在两个 div 之间但是如果我添加填充，例如它会影响下面内容的定位，它似乎根本没有这样做。

干杯

header.php

<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php       
 bloginfo('name'); ?></title>

    <link href="//www.google-analytics.com" rel="dns-prefetch">



    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php bloginfo('description'); ?>">

    <?php wp_head(); ?>


 </head>
 <body <?php body_class(); ?>>

    <!-- wrapper -->
    <div class="wrapper">

        <!-- header -->
        <header class="header clear" role="banner">

                <!-- logo -->
                <div class="headercenter">
                <div class="logo">
                    <a href="<?php echo home_url(); ?>">
                        <!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-  
web-fallbacks-with-png-script -->
                        <img src="<?php echo get_template_directory_uri(); ?  
>/img/logo.png" alt="Logo" class="logo-img"></a>

  <!-- /logo -->
                        </div>  


                <div class="information">
                <p class="t_header">Call Us</p>
                <p class="b_text">01209 215671</p>

                <p class="t_header">E-Mail Us</p>

                <p class="b_text">secretary@pennoweth.cornwall.sch.uk</p>


   <!-- /information -->
</div>

                    <!-- /headercenter -->



                </div>

                <!-- nav -->

                <nav class="nav" role="navigation">
                    <?php html5blank_nav(); ?>
                </nav>

                <!-- /nav -->

        </header>
        <!-- /header -->

CSS

#nav{
width:100%;
height:50px;
position:relative;

left:0;
background:#555555;


}

【问题讨论】：

如果导航栏应该在标题之外...把它从标题中取出。我们对您的 CSS 的其余部分了解不足，因此无法发表评论。也许是一个 JSfiddle 演示？
导航需要在标题中，因为我希望它出现在每个页面上，就在标题内容（徽标和联系信息）之后。以后我可以做一个 JSfiddle 演示，干杯

标签： html css wordpress

【解决方案1】：

根据提供的信息（实际上可以使用更多细节，最好是链接），听起来您可能有一个绝对位置分配给一个元素。绝对定位的元素将相对于具有 RELATIVE 位置的第一个父元素显示。

如果您删除“位置：绝对”，它应该显示在 's 的流程中。

只是关于两个元素如何占据同一个位置的有根据的猜测！

【讨论】：