Html 显示包含元素外部的文本

我想做到这一点。留意最上面的文字“快乐水果”。我想覆盖盒子，而它嵌套在里面

正文{
背景：黄色；
填充：50px；
}
.滑块{
宽度：100%；
高度：650px；
边缘顶端：40px；
背景：橙色；
盒影：0 0 78px 11px#F3286B；
}
h1，h2{
文本转换：大写；
颜色：红色；
}
h1{
字体大小：11vw；
}
氢{
字体大小：7vw；
}

喜果
你好，世界

使用绝对定位

正文{
背景：黄色；
填充：50px；
}
.滑块{
宽度：100%；
高度：650px；
边缘顶端：40px；
背景：橙色；
盒影：0 0 78px 11px#F3286B；
位置：相对位置；
垫面：1.2米；
}
h1，
氢{
文本转换：大写；
颜色：红色；
}
h1{
字体大小：11vw；
位置：绝对位置；
顶部：-1.2米；
}
氢{
字体大小：7vw；
}

喜果
你好，世界
调整
的位置有什么问题？您可以通过向
.slider
添加填充来偏移位置

.slider {
  position: relative; <!-- necessary in case other position is set in ancestry -->
  padding-top: 10px;
}
h1 {
  position: absolute;
  top: -10px;
}


喜果
你好，世界
您可以在此处使用
线性渐变
，对于
框阴影
您可以使用绝对定位的伪元素（具有所需的偏移）

例如，使用
40px
offset
背景图像：线性渐变（到底部，透明40px，橙色40px）。我们还应该为伪元素应用
top:40px

演示：


正文{
背景：黄色；
填充：50px；
}
.滑块{
宽度：100%；
高度：650px；
背景图像：线性渐变（至底部，透明40px，橙色40px）；
位置：相对位置；
}
.滑块：之前{
内容：“；
位置：绝对位置；
左：0；
右：0；
顶部：40px；
底部：0；
盒影：0 0 78px 11px#F3286B；
/*不要重叠容器*/
z指数：-1；
}
h1，
氢{
文本转换：大写；
颜色：红色；
}
h1{
字体大小：11vw；
}
氢{
字体大小：7vw；
}

喜果
你好，世界
h1{position:relative；top:-50px；}
如果不起作用，就会发生这种情况（在更新的帖子中检查img）
.slider{overflow:visible；}
在我看来是一个简单的溢出问题，问题是，在提供的代码段中应用此解决方案是可行的，因此如果它在生产中不起作用，还有其他一些样式或因素没有包含在您提供给我们的代码中，以便我们处理和排除。@UncaughtTypeError完成了这项工作，感谢您的输入，但有人提到添加溢出：对.slider可见，这就解决了它