使div与另一个重叠

Question

您好我正在使用粉底创建一个导航栏，并希望实现照片中看到的效果，其中徽标框与其下方的内容重叠但是目前它正在扩展整个导航栏的高度而不仅仅是徽标部分。

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

HTML

<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>

CSS

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

Answer 1

给.logo一个absolute而不是relative的位置，并给它一个明确的高度和宽度。