Html 仅CSS滑块按钮悬停问题-从AMKohn'；s代码笔

我发现AMKohn提供了一个整洁的CSS滑块：

滑块通过使用单选按钮和标签在“幻灯片”之间移动来工作

默认情况下，幻灯片是隐藏的，并在选中相应的单选按钮时显示

我修改了滑块，使每张照片下面都有一个标题，扩展了浏览器的宽度

因此，我的标记和CSS与最初的有点不同，但其原理仍然相同（仍然使用标签和单选按钮在幻灯片之间移动）

我认为这会影响标签（充当导航按钮）。使用鼠标悬停时不会显示这些选项

position:absolute;

但是，当

位置

设置为

相对

时，按钮工作正常，除非它们不在正确的位置（照片的两侧）

有人能解释一下如何解决这个问题吗？

解决了这个问题

本质上，问题是由于在父元素

.slides

上使用了

position:absolute

我默认设置了

display:hidden

，并在

input:checked

时设置了

display:block

这防止了DIV“堆叠”，我认为这是导航按钮不起作用的原因（以一种非常非技术性的方式）

工作滑块位于此处：