如何实现与CSS

Question

我想才能够产生这种效果这个效果如下图所示：

其中一个部分的块被抬高的另一部分的顶部，这是常有时间这样做的文本块，但我找不到一个很好的例子，所以我的s/s使用图像。

我知道这是一个非常普遍的效果，但我不知道它的名字，所以我很难找到它的指南。如果有人能给我这个CSS效果的名字，那么我可以在网上搜索它并学习如何达到这个效果。

Answer 1

有点晚了党：

https://jsfiddle.net/2ezwtj1j/

<div id="landing" style="padding-bottom: 200px;" class="ui inverted middle aligned grid"> 
</div> 

<div id="card"> 
<h1> 
My Sick Header 
</h1> 
</div> 

我使用负保证金叠加元素上也是如此。

Answer 2

在他们的情况下，他们使用绝对定位。您还可以使用transform: translate();向上移动元素（到另一个部分）。下面是一个例子。

顺便说一句，您可以随时使用开发工具来检查页面，并查看它们用于定位该元素的CSS。以下是截图中该布局的URL。 http://unbounce.com/landing-page-template/mova/

* {margin:0;} 
 
section { 
 
    background: red; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 
section:nth-child(2) { 
 
    background: blue; 
 
} 
 
h1 { 
 
    background: #fff; 
 
    position: absolute; 
 
    top: -.5em; 
 
    width: 50%; 
 
    text-align: center; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<section></section> 
 
<section><h1>hello</h1></section>

Answer 3

您可以通过使用负边距来看看实现这一点：

https://jsfiddle.net/7Lb5x1he/

HTML

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

CSS

div { 
    height: 200px; 
    border: 1px solid black; 
} 

div:nth-of-type(1) { 
    background: lightblue; 
} 

div:nth-of-type(2) { 
    background: grey; 
} 

div:nth-of-type(3) { 
    width: 60%; 
    margin: -300px auto 0 auto; 
    background: white; 
}