Question

我可以创建此处显示的效果：

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

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

Answer 1

在他们的情况下，他们使用绝对定位。您还可以使用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;
}

如何用css实现这个效果

3 个答案: