title: Place a div between two sections so that it's partially on top of both of them
body: <p>I'm pretty much trying to copy what you see in the following picture. I have three sections. Between section 1 and section 2 (the blue section) you can see the white arrow-box. That's what I can't place properly without messing things up.</p>
  
  <p><img src="https://i.stack.imgur.com/I5bvQ.jpg" alt="enter image description here"></p>
  
  <p>Now I already got this "working" by placing the arrow box inside the blue section, and then gave both the arrow-box and the blue section absolute positions, and then gave the arrow box some minus margin from top. The problem with this is, that for some reason I can't create section 3 that is supposed to come after the blue section. I can't place anything under the blue section if its position is absolute. If I give the blue section a relative position, things obviously start working normally again, but then the arrow box gets out of place and something like this happens:</p>
  
  <p><img src="https://i.stack.imgur.com/G3lIu.jpg" alt="enter image description here"></p>
  
  <p>My code looks something like this, HTML:</p>
  
  <pre><code>&lt;section id="first-section"&gt;
  &lt;!-- bunch of stuff here --&gt;
  &lt;/section&gt;
  &lt;section id="blue-section"&gt;
      &lt;div class="arrow_box"&gt;
          &lt;p&gt;How can I help you?&lt;/p&gt;
      &lt;/div&gt;    
  &lt;/section&gt;
  &lt;section id="third-section"&gt;
  &lt;!-- More stuff here --&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#blue-section {
  position: relative;
  }
  .arrow_box {
      position: absolute;
      width: 500px;
      height: 100px;
      left:0;
      right:0;
      margin-left:auto;
      margin-right:auto;
      margin-top: -50px;
  }
  </code></pre>