需要在标题div上方显示内容div的一部分，尝试边距和顶级css样式

Question

尝试将标题div与标题div重叠20-40px，但它显示在标题div下方。任何帮助表示赞赏。

我尝试使用margin-top：-20px和top：-20px，但没有任何效果。

显示在container_12.header div

后面的内容div的屏幕截图

这是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>

那些div的CSS

.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

你#content，尝试使用z-index：1000; position：要么是fix，要么是inhert，要么是inhert

Answer 2

注意你的z-index。由于您的content类低于DOM树中的header，因此默认情况下它的z-index值较低。设置每个元素position: relative并将标题设为比z-index更低的content。