CSS - 元素溢出/重叠此父div仍然保持溢出：隐藏;？

Question

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

• 正如您所见，<h1>Happy Fruit</h1> 重叠 父 div .slider
• 同样在底部，您可以看到.slider_dots（滑块导航底部）也重叠父div .slider

通过父div 我的意思是<h1>和.slider_dots都嵌套在div .slider

中

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

.slider { overflow: hidden; }然后给它一个负值（推它）。它只是在父div .slider内消失。

任何人都知道如何解决这个问题？我尝试使用overflow-x和overflow-y，但他们似乎无法工作。

我已经上传了实时版 here on my hosting（第三页），想要玩/尝试一下。如果需要，我可以将它上传到jsfiddle，尽管它有很多代码。

（如果文字是删除线，这意味着您正在错误的视口中查看它，请尝试将窗口向下拖动，现在只为手机/平板电脑尺寸编写。）

Slider used.

Answer 1

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