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
How to put a span over an image
提问by kwichz
回答by Thomas Shields
Change the position on the menu_label
to absolute and add position:relative
to menu
将上的位置更改menu_label
为绝对并添加position:relative
到menu
回答by Jordonias
Use position: absolute; for the span rather than relative
使用位置:绝对;对于跨度而不是相对
回答by Paul D. Waite
It seems like you're confused about how position: relative
works.
您似乎对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:absolute
instead of position:relative
使用position:absolute
代替position:relative
This reference might help: CSS Positioning 101
此参考可能会有所帮助:CSS 定位 101
回答by Mustafa
Add position:relative
to the container and position: absolute
to the .men_label.
添加position:relative
到容器和position: absolute
.men_label。
Here is the code:
这是代码:
.menu{
position:relative;
}
.menu_label {
position: absolute;
top: 85%;
left: 5%;
}