我正在尝试创建一个HTML DOM幻灯片创建器，它将文本，图像等插入到幻灯片中以进行演示。主要的浏览器是Nintendo DSi和3DS浏览器，但我也想要计算机的功能，这意味着我使用的是CSS百分比。
但是这里有一个问题：HTML span元素的相对位置是前100％左边：90％。
左侧位置很好 - 顶部位置不是......我不明白为什么，但是从顶部定位开始，元素完全显示在元素之外。
亲自检查here。
“幻灯片1”应该是我所拥有的浅灰色div的下边框。当定位应该相对于该div时，为什么这是外部的？
我一直对CSS定位感到困惑......有人可以帮我解决这个问题吗？这令人沮丧。顺便说一下，你所寻找的是HTML div之外的“Slide 1”。
答案 0 :(得分：0)
由于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直接放在left: 90%的底部，试图将其置于底部。您可以保留{{1}}。