SO image over navbar

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src=" http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
 <nav class="navbar navbar-inverse">
<div class="navbar-inner">
  <ul class="nav">
    <li><a href="#">link 1</a></li>
    <li class="active"><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
  </ul>
  </div>
  </nav>
    
    <div class="container mypic">
       
            <img src="https://mindbodyfuel.com/images/d39f3565-098e-4b7c-991e-0caf1874a487.jpeg" />
        </div> <!-- end container -->

CSS

.mypic {
margin: -120px 0 -20px 10px; /* play with these to position the image */
position:absolute;
z-index:100;
width:300px;
}