如何用css实现这个效果

Question

我将能够创建此处显示的效果：

如果一个部分的块被推到另一个部分的顶部，那么它通常是一个文本块，但是我找不到一个很好的例子，所以我的s / s使用了一个图像。

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

Answer 1

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

顺便说一句，你总是可以使用你的开发工具来检查页面，看看他们用来定位那个元素的CSS。 以下是屏幕截图中该布局的网址。 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 2

你可以通过使用负上边距来看看：

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

Answer 3

我在覆盖元素上使用了负边距： https ： //jsfiddle.net/2ezwtj1j/3/

HTML

<div id="landing"></div>
<div id="card">
    <h1>My Sick Header</h1>
    <p>My amazing content.</p>
</div>

CSS

#landing {
    margin:0px;
    padding-bottom: 200px;
    background: #7703a5;
    background: -moz-linear-gradient(-45deg,  #7703a5 0%, #00c7ef 100%);
    background: -webkit-linear-gradient(-45deg,  #7703a5 0%,#00c7ef 100%);
    background: linear-gradient(135deg,  #7703a5 0%,#00c7ef 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7703a5', endColorstr='#00c7ef',GradientType=1 );
}

#card {
  padding: 1vw;
  box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
  width:80%;
  height:300px;
  background:#fff;
  margin: 0 auto;
  margin-top:-100px;
  font-family: sans-serif;
}