CSS: Div straddling 2 other divs - css

Question

I'm curious whether it's possible with CSS to have a <div> overlaying the <div> above and below, like so:
I've tried to use margin-top: -40px;, but that doesn't seem to work. I've tried position:relative; without any luck, either. Any ideas?
Thanks!

Answer 1

Sure!
Demo Fiddle
The trick is managing the positioning of your divs, then setting the offset (top) correctly for the div you want overlapping.
<div></div>
<div>
<div></div>
</div>
CSS
div {
width:100%;
height:100px;
position:relative; /* ensure the parent divs have a position set */
}
div:first-child {
background:red;
}
div:last-child {
background:blue;
}
div:last-child div {
opacity:.5;
height:50px;
background:white;
position:absolute; /* position relative to the parent */
top:-25px; /* position the top to -25px (half its height) above the top of the parent */
}

Answer 2

There are many ways to do this:
With all div's absolutely positioned
You can use position: absolute to achieve this. This is better if you are trying to build a web app as it sticks to the edges of the screen.
Fiddle here
HTML
<div id="top-section"></div>
<div id="banner-section"></div>
<div id="btm-section"></div>
CSS
div {
position: absolute;
left: 0;
width: 100%;
}
#top-section {
top: 0;
bottom: 50%;
background: red;
}
#btm-section {
top: 50%;
bottom: 0;
background: blue;
}
#banner-section {
height: 100px;
margin-top: -50px;
top: 50%;
background: rgba(255,255,255,0.5);
z-index: 2;
}
With the #banner-section relatively positioned
You mentioned that you tried relative position. This is how you can achieve what you were trying to do. In this case, you want the #banner-section to be nested inside the #btm-section:
Fiddle here
HTML
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
position: relative;
top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
With a negative margin on #banner-section
You also mentioned that you tried using a negative value for the margin-top. Here is a working example of that:
Fiddle here
HTML
(Also nested)
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
margin-top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
You can also have it poking out of the top section
If the #top-section is static and the bottom section can extend past the bottom of the page, this might be the best option for you.
Fiddle here
HTML
<div id="top-section">
<div id="banner-section"></div>
</div>
<div id="btm-section"></div>
CSS
#banner-section {
position: absolute;
bottom: -50px;
z-index: 2;
height: 100px;
background: rgba(255,255,255,0.5);
}

Answer 3

Without further details you can do it as follows:
JSFiddle Example
HTML
<div class="top-section"></div>
<div class="banner-section"></div>
<div class="btm-section"></div>
CSS
.top-section{
height:60px;
background-color:red;
}
.btm-section{
height:60px;
background-color:blue;
}
.banner-section{
position:absolute;
z-index:1;
margin-top:-20px;
height:40px;
width:100%;
background-color:rgba(255,255,255,0.5);
}
End Result
The trick here is to have the middle div banner-section positioned absolutly, and with a margin-top value negative corresponding to half its height, giving us this end result:
Explanation
Since the element with the CSS class .banner-section gets positioned absolutely, it will rise above in the document stack order. So the elements .top-section and .btm-section stay one after the other.
An element with position:absolute will then need some extra css to keep up with the desirable appearence, like a width declaration and a height declaration to set its size.

Answer 4

Check if this one helps you
http://codepen.io/anon/pen/EJBCi.
<div class="outer">
<div class="topSec"></div>
<div class="midSec">Midcontent</div>
<div class="btmSec"></div>
</div>
CSS
.outer {
position: relative;
height: 400px;
text-align: center;
}
.topSec {
height: 50%;
background: red ;
}
.btmSec {
height: 50%;
background: yellow ;
}
.midSec {
position: absolute;
background: rgba(255,255,255,0.7);
z-index: 1;
top: 50%;
height: 60px;
margin-top: -30px;
left: 0;
right: 0;
line-height: 60px
}