css - 元素被定位在元素之外

Question

我正在尝试制作一个 HTML DOM 幻灯片创建器，将文本、图像等插入到幻灯片中进行演示。我考虑的主要浏览器是 Nintendo DSi 和 3DS 浏览器，但我也想要计算机的功能，这意味着我正在使用 CSS 百分比。

但问题在于:HTML span 元素的相对定位为 top 100% 和 left:90%。

左侧位置很好——顶部位置不是……我不明白为什么，但跨度完全显示在顶部定位的元素外部。

自己检查一下 here .

“幻灯片 1”应该位于我拥有的浅灰色 div 的底部边框上方。当定位应该相对于那个 div 时，为什么这个在外面？

我一直对 CSS 定位感到困惑...有人可以帮我解决这个问题吗？这越来越令人沮丧。顺便说一句，您要查找的是 HTML div 之外的“幻灯片 1”。

Answer 1

正是因为 top: 100%，它才“完全显示在元素外部”。这就是告诉它将 span 移动到容器高度的 100%，当然，因为它从容器的顶部开始，所以它刚好超过容器的底部。请注意，relative 定位并不是像您所说的那样“相对于那个 div”，它实际上是相对于 span(you may want to do some reading on that)。但是，当使用百分比偏移量时，它会计算与容器大小相关的偏移量。

由于您的 div.slide 容器本身就是 position:relative，那么我相信您想要的是将 span 设置为 position:absolute 而不是做一个 top 定位，做一个 bottom: 0 这将把它直接放在 div< 的底部 你正试图把它放在底部。您可以保持剩余:90%。