Html 如何在图像上放置跨距

我有这样的想法：我想把span元素

菜单标签

放在图像上，而不是放在底部

不知道为什么它开始从容器的底部得到顶部和左侧（也就是说，使用class

菜单

）

---

有什么想法吗？

使用位置：绝对；对于跨度而非相对

将

菜单标签上的位置

更改为绝对，并将

位置：相对

添加到

菜单

---

您似乎对

位置：相对
的工作原理感到困惑

你有：

position:relative; top:50px; left:5px;

它将跨度的顶部定位在静态位置下方50个像素处，其左边缘定位在其右侧5个像素处。
使用
位置：绝对
而不是
位置：相对

此引用可能会有帮助：
将
位置：相对
添加到容器，将
位置：绝对
添加到.menu标签

代码如下：

.menu{
 position:relative;
}
.menu_label {
 position: absolute;
 top: 85%;
 left: 5%;
}

是的，但是为什么？容器是静态的（默认情况下）。因此，作为相对的跨度应该以正确的方式接受静态！？！？显示的代码将菜单的位置设置为相对。因此，菜单是菜单标签的容器。菜单标签静态位置位于图像下方。使用位置：绝对；菜单标签的位置将相对于其容器，并将忽略容器中的其他对象。注意：将对象位置设置为绝对时，它的位置将相对于第一个父容器，该容器的位置不是静态的。将
position:relative
添加到
菜单中
会使跨度更准确地居中。这是如何工作的？当您添加position:relative-to-menu时，它会使跨度相对于自身而不是整个页面是“绝对”的。