html - 将包装器 div 重叠到前一个 div 中的 Div 元素

Question

我试图让第二个包装 div 中的图标交叉并剖析前一个包装 div，但应该出现在上面的 div 中的那一半不会出现。即使有更高的 z-index。如果我更改包装器 div 溢出或位置样式，它会抛出所有内容。这样做的正确方法是什么？这是 html 和 css:

.wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 40px;
  height: auto;
  clear: left;
  overflow: auto;
  z-index: 1;
}
.process {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.process .icon {
  position: relative;
  height: 123px;
  width: 123px;
  margin-top: -60px;
  border-radius: 50%;
  z-index: 3;
}

<div class="wrapper">
  <div class="page-heading">
    <div class="col-md-6 col-centered">

    </div>
  </div>
</div>
<div class="wrapper blue">
  <div class="process">
    <div class="icon blue border-blue col-centered">

    </div>
    <div class="col-md-4 col-md-offset-1">
      <div class="entry-content">

      </div>
    </div>
    <div class="col-md-7 padding-right-100">

    </div>
  </div>
</div>

Answer 1

不需要表格显示。您需要的是所有元素的实际高度 - 自动高度不会在没有内容的情况下工作，并且 100% 高度仅在父容器的高度(在本例中为正文)也被定义时才有效。我将主体部分设为 100%，将两个 wrapper 设为 50%。

圆形 DIV 已使用 margin: 0 auto 水平居中，并使用 top: -60px 向上推，同时具有:position: relative . z-indexes 保持不变， wrapper 为 1，圆圈/图标为 3(也可以是 2)。

在 http://codepen.io/anon/pen/KgNXmj 处还有一个代码笔

html, body {
  height: 100%; 
  margin: 0;
}
.wrapper {
  width: 100%;
  height: 50%;
  z-index: 1;
  background: green;
}
.process {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: blue;
}
.process .icon {
  position: relative;
  top: -60px;
  margin: 0 auto;
  height: 123px;
  width: 123px;
  background: #f00;
  border-radius: 50%;
  z-index: 3;
}

<div class="wrapper">
  <div class="page-heading">
    <div class="col-md-6 col-centered">

    </div>
  </div>
</div>
<div class="wrapper blue">
  <div class="process">
    <div class="icon blue border-blue col-centered">

    </div>
    <div class="col-md-4 col-md-offset-1">
      <div class="entry-content">

      </div>
    </div>
    <div class="col-md-7 padding-right-100">

    </div>
  </div>
</div>