html - 需要在 header div 上方显示部分内容 div，尝试了 margin 和 top css 样式

Question

尝试将标题 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

注意你的z-index。由于您的 content 类位于 DOM 树中的 header 之下，因此默认情况下它将具有较低的 z-index 值。使每个元素 position: relative 并为 header 提供比您的 content 更低的 z-index。