title: Overlap an element over another element
body: <p>I'm trying to make such a stuff
  <img src="https://i.stack.imgur.com/HtHvF.png" alt="enter image description here"></p>
  
  <p>But somehow I got something like the one below(Please ignore the color, font family for now)
  <img src="https://i.stack.imgur.com/pcPqd.png" alt="enter image description here"></p>
  
  <p>My code is <a href="http://jsfiddle.net/nrEfm/1/" rel="nofollow noreferrer">here</a>.
  HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;p&gt;Instagram Photo&lt;/p&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box{
       background-color:red;
       width:60%;
       margin-left:20%;
       height:30px;
       z-index:3;
       position:static;
  }
  .box p{
      text-align:center;
      color:white;
      line-height:30px;
  }
  hr {
      border-top: 1px solid red; 
      border-bottom: 1px solid blue; 
      z-index:-1;
      margin-top:-15px;
      position:static;
  }
  </code></pre>