Html 如何在html中将文本置于最前面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18420166/
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 bring text to front in html
提问by Ryan Zachary
I have website were the picture is over lapping the text but I want it the other way around.
我有网站，图片与文字重叠，但我希望它反过来。
<p>my text</p>
<img href="picture.jpg">
I got it so there both in the same place but the picture is still on top so far I've only tired flipping the order of the two lines of code but that did nothing
我得到了它，所以它们都在同一个地方，但到目前为止，图片仍然在最上面，我只是厌倦了翻转两行代码的顺序，但什么也没做
回答by Itay
回答by James Cushing
Add some css to set the z index of the text to be greater than the image
添加一些 css 来设置文本的 z 索引大于图像
HTML
HTML
<p id="text">my text</p>
<img id="image" src="picture.jpg">
CSS
CSS
#text{
z-index: 1;
}
#image{
z-index: -1;
}
Note you must position both elements in order for z-index to take effect. Use position:absolute, position:relative, or position:fixed
请注意，您必须定位两个元素才能使 z-index 生效。使用位置：绝对、位置：相对或位置：固定
EDIT: Rahul rightly pointed out the original code used href instead of src. Updated as src is better practice
编辑：Rahul 正确地指出原始代码使用了 href 而不是 src。更新为 src 是更好的做法
回答by rzr418
use the z index property here's a link that will help http://www.w3schools.com/cssref/pr_pos_z-index.asp
使用 z 索引属性，这是一个有助于http://www.w3schools.com/cssref/pr_pos_z-index.asp的链接
回答by Rahul Tripathi
You can add z-index: 100;after position: fixed;in your CSS.
您可以在 CSS 中添加z-index: 100;after position: fixed;。
And try to use srcfor image instead of href
并尝试使用src图像而不是href
回答by Jules
You need to learn how to use CSS's property called: z-index. Remember that you need to give positionto the element you want to give z-indexproperty.
您需要学习如何使用 CSS 的属性：z-index。请记住，您需要为position要赋予z-index属性的元素赋予属性。
