如何實現與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; 
}