CSS: Div straddling 2 other divs

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
}