Html 如何在图像上放置跨度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5985618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:35:08  来源:igfitidea点击:

How to put a span over an image

htmlcss

提问by kwichz

I have this code: I'd like to put the span element menu_labelover the image, not at the bottom.

我有这个代码:我想把 span 元素menu_label放在图像上,而不是放在底部。

Dunno why it start to get the top and left from the bottom of the container (that is, with class menu).

不知道为什么它开始从容器的底部(即 class menu)开始获取顶部和左侧。

Any ideas?

有任何想法吗?

回答by Thomas Shields

Change the position on the menu_labelto absolute and add position:relativeto menu

将上的位置更改menu_label为绝对并添加position:relativemenu

http://jsfiddle.net/uc8jc/2/

http://jsfiddle.net/uc8jc/2/

回答by Jordonias

Use position: absolute; for the span rather than relative

使用位置:绝对;对于跨度而不是相对

回答by Paul D. Waite

It seems like you're confused about how position: relativeworks.

您似乎对position: relative工作方式感到困惑。

You've got:

你有:

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

That positions the top of the span 50 pixels below where it would have been if positioned statically, and its left edge 5 pixels to the right of where it would have been.

这将跨距的顶部定位在静态定位的位置下方 50 个像素,并将其左边缘定位在它本来的位置右侧 5 个像素处。

回答by Leftium

Use position:absoluteinstead of position:relative

使用position:absolute代替position:relative

This reference might help: CSS Positioning 101

此参考可能会有所帮助:CSS 定位 101

回答by Mustafa

Add position:relativeto the container and position: absoluteto the .men_label.

添加position:relative到容器和position: absolute.men_label。

Here is the code:

这是代码:

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