html - CSS - 元素溢出/重叠此父 div 但仍保持溢出 :hidden;?

Question

这是我的模型(=设计)，我想用代码实现。

• 如您所见<h1>Happy Fruit</h1>是重叠 parent div .slider
• 您还可以在底部看到 .slider_dots ( slider 导航底部)也重叠父div .slider

By parent div 我的意思是<h1>和 .slider_dots嵌套在 div .slider 中

好的，这是棘手的部分，我知道我可以使用 .slider { overflow: visible; } 轻松解决这个问题然后文本将与父级重叠 div .slider但是当我这样做时，我得到你可以看到它旁边的其他幻灯片(就像你可以在下面的 img 上看到的那样)。因为它是一个 slider ，所以它需要是 .slider { overflow: hidden; }

.slider { overflow: hidden; }然后给负值(向上推)。它只是消失在父级内部div .slider像这样。

有人知道我该如何解决这个问题吗？我尝试使用 overflow-x和 overflow-y但它们似乎不起作用。

我已经上传了一个实时版本 here on my hosting (第三页)如果您想玩/尝试一些东西。如果需要，我也可以将它上传到 jsfiddle，尽管它是一大堆代码。

(如果文本是删除线，这意味着您在一个糟糕的视口(viewport)上查看它，请尝试向下拖动您的窗口，它现在只针对手机/平板电脑大小编写。)

Slider used.

Answer 1

您需要向 slider 添加另一个内部元素。这样，您可以将其填充在顶部，并应用您的背景。然后，您可以拉回您的内容，与背景重叠。这样您就可以像往常一样应用溢出，同时也不再裁剪文本。