如何将图像放在文本 HTML 前面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15418808/
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 can I bring an image in front of text HTML?
提问by JayD2208
I'm in the process of creating a website template with Adobe Dreamweaver CS6 in HTML and CSS, and I have created a header with the position:fixed;declaration, but when I view the code live, my dummy text shows over the top of the image for some reason. Is this a common problem in HTML? Is there a fix for this?
我正在使用 HTML 和 CSS 中的 Adobe Dreamweaver CS6 创建网站模板，并且我已经创建了一个带有position:fixed;声明的标题，但是当我实时查看代码时，我的虚拟文本显示在图像顶部原因。这是 HTML 中的常见问题吗？有没有办法解决这个问题？
My code sections
我的代码部分
My HTML:
我的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>DC Personal Training</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../CSS/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<!-- end .header --><img src="../Images/header.png" width="1567" height="177" alt="Dan Christopherson Personal Training" /></div>
<div class="container">
<div class="content">
<h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
<!-- TemplateBeginEditable name="Content" -->Just some
<!-- end .content -->
dummy text.<!-- TemplateEndEditable --></div>
<div class="footer">
Copyright Dan Christopherson Personal Training, 2013. All rights reserved. Website by Xtreme Web Design.
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
My CSS:
我的CSS：
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
margin: 0;
padding: 0;
color: #FFF;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
background-color: #000000;
margin: 0 auto;
}
.header {
background-color: ;
position: fixed;
top: 0;
vertical-align: top;
}
.sidebar1 {
float: left;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 950px;
float: left;
}
.sidebar2 {
float: left;
width: 180px;
background-color: #EADCAE;
padding: 10px 0;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background-color: #ADB96E;
color: #FFF;
}
.footer {
padding: 10px 0;
background-color: #000000;
position: relative;
clear: both;
color: #8cc638;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Thanks in advance.
提前致谢。
回答by Jake Zeitz
Add z-index: 100;after position: fixed;in your css rule for your header element.
在您的标题元素的 css 规则中添加z-index: 100;after position: fixed;。
回答by u2157216
'z-index' must be used in combination with 'position'. 'position' alone will work, it will set the position of the corresponding div or whatever element. By default everything are in the same layer (the same z-index), to put some element in top (or beneath) another, define another number, minus, 0 (zero), or positive integer.
'z-index' 必须与 'position' 结合使用。'position' 单独会起作用，它将设置相应 div 或任何元素的位置。默认情况下，所有内容都在同一层（相同的 z-index）中，要将某个元素放在另一个元素的顶部（或底部），定义另一个数字、减号、0（零）或正整数。
