Make a div overlap another - css

Question

Hi so I am using foundation to create a navigation bar and would like to achieve the effect seen in the photo where the logo box overlaps the content below it however currently it is expanding the height of the whole navigation bar and not just the logo section.
What I would like it to look like:
What it is looks now:
HTML
<div class="row">
<div class="logo large-3 columns">
<ul class="menu">
<li class="menu-text"><?php bloginfo('name'); ?></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">
check availability
</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

Give .logo a position of absolute instead of relative, and give it an explicit height and width.