简单的Z索引不起作用
[英]Simple Z-Index not working
问题描述
I am trying to place my header <h1> over a div class named light which contains a background image named light.png . 
我试图将标题<h1>放在名为light的div类上，该类包含名为light.png的背景图像。 I have stacked them using Z-index and added position:relative , but still <h1> is not placed over <div class=light> . 我已经使用Z-index堆叠了它们，并添加了position:relative ，但是<h1>仍然没有放在<div class=light> 。
What am I doing wrong? 我究竟做错了什么？ Here is my html code : 这是我的html代码 ：
<body>
<div class="light"></div>
<h1>sdfdsf</h1>
</body>
css code: CSS代码：
body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
z-index:1;
}
.light {
background-image: url(images/light.png);
margin-left:auto;
margin-right:auto;
z-index:2;
width:763px;
height:566px;
position:relative;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 48px;
color: rgba(255,255,255,1);
position:relative;
z-index:5;
}
6 个解决方案
解决方案1
2 已采纳 2012-07-28 16:55:21
All you have to do is to place your <h1> tag inside the <div> tag. 您要做的就是将您的<h1>标签放在<div>标签内。
<div class="light">
<h1>sdfdsf</h1>
</div>
Live example: Tinkerbin 现场示例： Tinkerbin
I modified your background color to show the example . 我修改了背景色以显示示例 。
You don't need to use z-index for this. 您不需要为此使用z-index 。
解决方案2
2 2012-07-28 16:58:20
Here is an exmaple of what I said in my comment: 这是我在评论中说过的话的典范：
html code: html代码：
<body>
<div class='outer'>
<div class="light"></div>
<h1>sdfdsf</h1>
</div>
</body>
css code: CSS代码：
body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
}
.outer{
position:relative;
}
.light {
background-image: url(images/light.png);
margin-left:auto;
margin-right:auto;
width:763px;
height:566px;
position:absolute;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 48px;
color: rgba(255,255,255,1);
position:absolute;
z-index:99999999999;
top:0;
left:0;
}
You can use all posiiton relatives but it is not fully browser compliant due to CSS bugs so I prefer to do this way since this will look ok on older browsers too, not just the new ones. 您可以使用所有posiiton亲戚，但由于CSS错误，它不能完全兼容浏览器，因此我更喜欢这样做，因为在较旧的浏览器上，不仅是新的浏览器，这看起来还可以。
解决方案3
2 2012-07-28 17:00:25
There is no need to assign z-index to the body 无需将z-index分配给主体
HTML - HTML-
<div class="light"></div>
<h1>hi</h1>
CSS - CSS-
.light {
background-image: url(http://www.ostpl.com/Gallery/web-hosting.jpg);
margin-left:auto;
margin-right:auto;
z-index:1;
width:763px;
height:566px;
border: 1px solid #f00;
position: relative;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 48px;
color: rgba(0,0,0,1);
position:absolute;
left: 0;
top: 0;
z-index:2;
}
解决方案4
1 2012-07-28 16:55:29
put <h1> tag inside the div light 将<h1>标签放在div light
<body>
<div class="light">
<h1>sdfdsf</h1>
</div>
</body>
解决方案5
1 2012-07-28 16:56:01
use absolute instead 使用绝对代替
<style type="text/css" media="screen">
body {
background-color: black;
background-repeat: repeat;
z-index:1;
}
.light {
background-color: yellow;
margin-left:auto;
margin-right:auto;
z-index:2;
width:763px;
height:566px;
position:absolute;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 48px;
color: rgba(255,255,255,1);
position:absolute;
z-index:5;
}
</style>
- absolute : The element is positioned relative to its first positioned (not static) ancestor element absolute：元素相对于其第一个定位（非静态）祖先元素的位置
- relative : The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position relative：元素相对于其正常位置定位，因此“ left：20”将20像素添加到元素的LEFT位置
解决方案6
1 2012-07-28 16:57:21
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.