Html CSS-元素溢出/重叠此父div，但仍处于溢出状态：隐藏；？

这是我想要在代码中实现的模型（=设计）

• 正如您所看到的，

  Happy Fruit

  是重叠的parent

  div.slider

• 在底部，您还可以看到

  .slider\u dots

  （滑块导航底部）也与父级

  div.slider重叠

通过父div我的意思是

和

.slider\u点

都嵌套在

div.slider

好的，这里是一个棘手的部分，我知道我可以通过使用

.slider{overflow:visible；}

轻松解决这个问题，然后文本将与父级

div.slider

重叠，但是当我这样做时，你可以看到它旁边的其他幻灯片（就像你在下面的img上看到的那样）。因为它是一个滑块，所以需要

。滑块{overflow:hidden；}

.slider{overflow:hidden；}

然后向上推一个负值。它只是在父级

div.slider

中消失了

有人知道我如何解决这个问题吗？我试过使用

overflow-x

和

overflow-y

但它们似乎不起作用

我已经上传了一个实时版本（第三页），以防你想玩/尝试一些东西。如果需要，我也可以将其上传到JSFIDLE，尽管这是一大堆代码

（如果文本被划破，这意味着您在一个不好的视口中查看它，请尝试向下拖动您的窗口，因为它现在只针对手机/平板电脑大小写入。）

---

您需要在滑块中添加另一个内部元素。这样，你就可以把它放在上面，然后应用你的背景。然后，您可以将内容向上拉，与背景重叠。这样，您可以像往常一样应用溢出，同时也不再裁剪文本

@VictorAllegret谢谢你的回复，我试过了，但没用，我想是因为这个问题，你可以看到它比div长，但我不明白为什么1）添加滑块的代码。2） 通过使用position absolute放置元素并使用

z-index

隐藏元素，可以避免

overflow:hidden

痛苦。顺便说一下，您可以为当前元素添加一些

active

类，并在元素没有

active

类时隐藏

h1

。@VadimOvchinnikov我使用过此滑块，但设计是无效的adjusted@Panic编辑您的答案并添加此代码。@为什么不能使用渐变和伪元素应用解决方案？