css - 让一个 div 与另一个 div 重叠

Question

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

我希望它看起来像: 现在看起来是什么:

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><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="beedeaffe7fef9ecf1ede8fbf0f1ecf6f1ebedfbf6f1eafbf290fdf190ebf5" rel="noreferrer noopener nofollow">[email protected]</a></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 指定一个绝对位置，而不是相对位置，并为其指定明确的高度和宽度。