Question

我的网站上有一个绝对定位的菜单，顶部带有文字的div。我想确保文本保留在菜单下方（类似于它相对定位）

HTML

<nav id="s-nav-wrap">

       <div id="s-nav" class="row">

        <div class="col-sm-4"> 
            <a href="..." id="s-logo"></a>  
        </div>

        <div class="col-sm-8 align-right">
            <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>

            <div id="btn-home">  <a href="...">HOME</a>  </div> 
        </div>

    </div>

</nav>

CSS

#s-nav-wrap {
  position: relative;
}

#s-nav { 
  position: absolute;
  z-index: 150;
  top: 0; left: 0; right: 0;
  width: 100%;
  margin-top: 25px; padding-left: 10px;
}

Answer 1

通过制作absolute，无论它是否位于relative定位元素内，您都会将其从正常流程中取出。

请参阅CSS reference of positioning schemes

请考虑以下选项，

使用position: relative
将菜单设置为固定高度（height: 100px）并为主要内容提供具有相同值（margin-height: 100px）

将绝对/固定div包装在一个相对的div中

1 个答案: