元素位于元素之外

Question

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

但这里有一个问题：一个HTML span元素的顶部100％和左侧：90％的相对位置。

左边的位置是好的 - 顶部的位置不是......我不明白为什么，但跨度显示在顶部定位元素之外。

自己检查一下here。

“幻灯片1”应该高于我的浅灰色格子的底部边框。为什么外面的定位应该是相对于那个div？

我一直对CSS定位感到困惑......有人可以帮我解释一下吗？这令人沮丧。顺便说一下，你要找的是HTML div外面的“幻灯片1”。

Answer 1

正是因为top: 100%，“完全显示在元素之外”。这是告诉它将容器的高度移动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%。