css - 如何将一个 div 分成多个可点击的部分？

Question

多年来我才第一次回到 HTML，我很感激从其他问答中获得的帮助，但我似乎找不到解决我最近的挑战的方法。

我正在使用 DIV 通过 onclick() 功能运行 JS。在我最近的改进中，我希望将一个 DIV 分成多个水平部分(我知道这是可能的)，但我希望文本继续流过这些部分。我将尝试展示我正在尝试做的事情的例子:

---

l 整个 DIV 的标题
我
l 选择 1 l 第 2 节 l 第 3 节

我希望每个部分的可点击范围都垂直向上延伸到标题文本中。我该怎么做？谢谢!

Answer 1

你把它分层。将标题 div 放在顶部或下方(并使部分 div 透明)。使用 z-index，您可以在图层中向上或向下放置 div。你只需要用绝对定位它们，因为内联(默认)它们不会重叠)。您也可以相对定位它们。

div.title {height: 2em;}
div.section {
position: relative;
top : -2em;
padding-top : 2em; (so the section text starts lower)
z-index: 999;
}

还有多种其他方法可以实现此目的。最好的取决于您网站的其余部分的外观以及它与其他所有内容的困惑程度如何。