I want to achieve this. Keep an eye on the top text 'Happy Fruit'. I want to be overlayed of the box while it's nested inside it.
body {
background: yellow;
padding: 50px;
}
.slider {
width: 100%;
height: 650px;
margin-top: 40px;
background: orange;
box-shadow: 0 0 78px 11px #F3286B;
}
h1, h2 {
text-transform:uppercase;
color: red;
}
h1 {
font-size: 11vw;
}
h2 {
font-size: 7vw;
}<body>
<div class="slider">
<h1>
Happy Fruit
</h1>
<h2>
HELLO WORLD
</h2>
</div>
</body>如果我然后去添加一个margin-top: -50px;文本将保留到 h1在 div 内部，但我怎样才能使它位于上面/站在上面当它仍然嵌套在（html）中时？我试过玩z-index但这没有用。
position: relative; top: -50px;
The .slides has overflow: hidden; because if it is on overflow:visible; the other slides of the slider will show up, like this.
问题是因为折叠边距 http://www.w3.org/TR/CSS2/box.html#collapsing-margins.
添加边框：1px实心透明；滑块类并将 margin-top 设置为 h1 标签的负数，例如 -40px，如下面的代码解决方案所示。
body {
background: yellow;
padding: 50px;
}
.slider {
width: 100%;
height: 650px;
margin-top: 40px;
background: orange;
box-shadow: 0 0 78px 11px #F3286B;
border: 1px solid transparent;
}
h1, h2 {
text-transform:uppercase;
color: red;
}
h1 {
font-size: 11vw;
margin-top: -40px;
}
h2 {
font-size: 7vw;
}<body>
<div class="slider">
<h1>
Happy Fruit
</h1>
<h2>
HELLO WORLD
</h2>
</div>
</body>