CSS：Div跨越2个其他div

Question

我很好奇CSS是否有可能<div>覆盖<div>上方和下方，如下所示：

我尝试使用margin-top: -40px;，但这似乎不起作用。我也试过position:relative;没有任何运气。有什么想法吗？

谢谢！

Answer 1

当然！

Demo Fiddle

诀窍在于管理div的定位，然后为要重叠的div正确设置偏移量（顶部）。

<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

有很多方法可以做到这一点：

所有div绝对定位

您可以使用position: absolute来实现此目的。如果您尝试构建一个Web应用程序，因为它粘在屏幕的边缘，这样会更好。

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;
}

---

#banner-section相对定位

你提到你试过相对位置。这就是你如何实现你想要做的事情。在这种情况下，您希望#banner-section嵌套在#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);
}

---

#banner-section

为负余量

您还提到您尝试使用margin-top的负值。以下是一个有效的例子：

Fiddle here

HTML

（也是嵌套的）

<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);
}

---

你也可以从顶部开出

如果#top-section是静态的，而底部可以延伸到页面底部，这可能是您的最佳选择。

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

如果没有进一步的细节，您可以按照以下方式进行：

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);
}

结束结果

这里的诀窍是让中间div banner-section绝对定位，并且边缘值为负值对应于其高度的一半，给出了最终结果：

解释

由于具有CSS类.banner-section的元素绝对定位，它将在文档堆栈顺序中上升。因此，元素.top-section和.btm-section会一个接一个地保留。

position:absolute元素需要一些额外的css才能跟上理想的外观，例如width声明和height声明来设置其大小。

Answer 4

检查这个是否可以帮助你

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
}