Place a div between two sections so that it's partially on top of both of them

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.

enter image description here

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:

enter image description here

My code looks something like this, HTML:

<section id="first-section">
<!-- bunch of stuff here -->
</section>
<section id="blue-section">
    <div class="arrow_box">
        <p>How can I help you?</p>
    </div>    
</section>
<section id="third-section">
<!-- More stuff here -->
</section>

CSS:

#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;
}

Solution

OK, then here you go:

HTML

<section class="container" id="first-section">
<!-- bunch of stuff here -->
</section>
<section class="container"  id="blue-section">
    <div class="arrow_box">
        <p>How can I help you?</p>
    </div>    
    <div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
    <div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
    <div class="col"> <img src="http://www.andalucesdiario.es/wp-content/uploads/2014/09/tyrion_lannister.jpg" alt="" /> </div>
</section>
<section class="container"  id="third-section">
<!-- More stuff here -->
</section>

CSS:

.container{position:relative; background:#ccc; padding:40px; width:100%; height:auto; min-height:100px;  text-align:center;}
#blue-section{background:#06c}
.arrow_box{position:absolute; background:#f9f9f9; position:absolute; top:-50px; left:50%; margin-left:-100px; height:100px; width:200px;}
.col{width:30%; padding:1%; display:inline-block;}
.col img{width:200px; height:200px; border-radius:50%;}

As you can see, you weren't that wrong, you just need to understand that absolute positioning requires a relatively positioned div in order to be positioned itself.

See the possible values so you understand (from Mozilla MDN)

static This keyword lets the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, left and z-index properties do not apply.
relative This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
absolute Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
fixed Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.
sticky The box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of ‘position: sticky’ on table elements is the same as for ‘position: relative’.

And if you made it here, you get a free fiddle