Question

Trying to overlap the header div by 20-40px over the header div, but it displays below the header div. Any help is appreciated.

I tried using margin-top: -20px and top: -20px, but nothing works.

Screenshot of the content div displaying behind the container_12.header div

Here is the html:

<div class="container_12 header"></div>

<div class="container_12 content">
  <div id="content">
    <h3>Header</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </div>
</div>

<div class="container_12 footer"> 
  <div id="footer">
    Footer text
  </div>
</div>

CSS for those div’s

.container_12.header {
  background-color:#AD986A;
  height:231px;
  width:100%;
  background:url('../img/header_bg.png');
  overflow: visible;
}

#content {
  width:960px;
  margin:-20px auto 15px auto;
  padding:5px 10px;
  border:7px solid #fff;
  background-color:#fcc;

  -moz-box-shadow: 0px 2px 6px #969696; 
  -webkit-box-shadow: 0px 1px 6px #969696; 
  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#969696, Strength=7, Direction=0),
  progid:DXImageTransform.Microsoft.Shadow(Color=#969696, Strength=7, Direction=90),
  progid:DXImageTransform.Microsoft.Shadow(Color=#969696, Strength=7, Direction=180),
  progid:DXImageTransform.Microsoft.Shadow(Color=#969696, Strength=7, Direction=270);
}

.container_12.content {
  background-color:#FFF6E5;
  width:100%;
  overflow: auto;
}

#footer {
  width:960px;
  margin:0em auto;
  overflow:auto;
  color:#fff;
}

.container_12.footer {
  background-color: #AD986A;
  color:#fff;
  font-size:12px;
  margin: 2px 0 7px 0;
  padding: 5px 0;
  font-family: Arial, Verdana, sans-serif;
  width:100%;
}

Answer 1

Pay attention to your z-index. Since your content class is below the header in your DOM tree, it’s going to have a lower z-index value by default. Make each element position: relative and give the header a lower z-index than your content.