Css 使一个div重叠另一个div 嗨，所以我用基金会创建一个导航栏，并希望在照片中看到的效果，标志框与它下面的内容重叠，但是目前它正在扩大整个导航栏的高度，而不仅仅是标志栏。

我希望它看起来像什么： 现在的样子：

HTML

---

给.logo一个

绝对

的位置，而不是

相对

，并给它一个明确的高度和宽度。

我将在其中放置一个徽标，这样就不需要我刚刚放置的最小高度来显示我遇到的问题，即div解释了它所在的div，而不是与下面的div重叠，并扩展了它所在的div。请参见我的编辑。这是我最好的猜测，因为您的html和css中有来自其他语言的变量和代码片段，这使得很难看到确切的问题是什么。如果您修改了代码，并且只包含导致问题的html标记，那么可能会更容易为您提供帮助。您是否能够在中重新创建菜单？我们需要查看您在导航栏中使用的所有css，以便更有效地帮助您。

<div class="row">
<div class="logo large-3 columns">
  <ul class="menu">
    <li class="menu-text"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></li>
  </ul>
</div>



<div class="large-9 columns">
  <div class="large-12 infobar ">


    <div class="hide-for-small-only hide-for-medium-only row">
    <div class="large-3 info_numbers columns grey info_padding">
      20°C
    </div>
    <div class="large-2 columns info_numbers info_padding  no-padding grey "> <i class="fa fa-phone icon-padding"></i>018803 294110</div>
    <div class="large-4 columns smaller-font info_padding grey no-padding"><i class="fa fa-envelope-o icon-padding"></i>STAY@GROSVENORHOUSEHOTEL.CO.UK</div>
    <div class="large-3 columns no-padding text-right">
    <a href="#" class="main-button small book_button">check availability</a>
    </div>
    </div>
    </div>
    <div class="row  ">

    <div class="large-12 header_info">
      <header class="no-padding top-bar-item " role="banner">
         <!-- This navs will be applied to the topbar, above all content
            To see additional nav styles, visit the /parts directory -->
         <?php get_template_part( 'parts/nav', 'topbar' ); ?>
      </header> <!-- end .header -->
</div>

.logo {
    background-color: $secondary-color;
    min-height:10em;
    position:relative;
    z-index:99;
}