简单Z索引不起作用

我想将我的标头<h1>放在名为light的div类中，其中包含名为light.png的背景图像。我已经使用Z-index堆叠了它们，并添加了position:relative，但仍然没有将<h1>放置在<div class=light>之上。简单Z索引不起作用

我在做什么错？这里是我的的html代码：

<body> 
    <div class="light"></div> 
    <h1>sdfdsf</h1> 
</body>

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; 
}

来源

2012-07-28 Ben Jackson

我可以问，为什么你不想把h1内的div。如果图像用于背景图像，则h1仍将显示在图像的顶部。 – 2012-07-28 16:53:07

所以你真的用z-index堆叠它们吗？ – 2012-07-28 16:53:17

将它们封装在一个外部div中，相对于外部div的位置和绝对位置绝对的两个内部元素，完成 – Sammaye 2012-07-28 16:54:16

所有你需要做的就是你的<h1>标签放置<div>标签内。

<div class="light"> 
    <h1>sdfdsf</h1> 
</div>

活生生的例子：Tinkerbin
我修改了背景颜色来表示例子。

您不需要为此使用z-index。

来源

2012-07-28 16:55:21

最简单的答案，谢谢。 – 2012-07-28 17:04:39

@BenJackson不客气:) – 2012-07-28 17:09:57

放<h1>标签的div light

<body> 
    <div class="light"> 
     <h1>sdfdsf</h1> 
    </div> 
</body>

来源

2012-07-28 16:55:29 Prashobh

使用绝对内部代替

<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>

绝对的：该元件相对于它的第一定位位置（未静态）祖先元素
相对：元素位于 rel ative到其正常位置，所以 “左：20”，增加了20个像素元素的左侧位置

来源

2012-07-28 16:56:01

见DEMO

HTML：

<body> 
    <div class="light"></div> 
    <h1>sdfdsf</h1> 
</body>

CSS：

.light { 
    position:relative; 
    width: 300px; 
    height: 100px; 
    background: #ccc; 
    z-index: 1; 
} 

h1 { 
    position:relative; 
    z-index: 2; 
    top: -10px; 
}

更大的Z指数 - 更高的元素。

来源

2012-07-28 16:57:21

以下是我在我的评论说的〔实施例：

的html代码：

<body> 
    <div class='outer'> 
     <div class="light"></div> 
     <h1>sdfdsf</h1> 
    </div> 
</body>

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; 
}

您可以使用所有posiiton亲戚但由于CSS错误，它不是完全符合浏览器的标准，所以我更喜欢这样做在旧版浏览器上也会看起来不错，而不仅仅是新版本。

来源

2012-07-28 16:58:20 Sammaye

Fiddle

没有必要指定z-index到身体

HTML -

<div class="light"></div> 
<h1>hi</h1>

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; 
}

来源

2012-07-28 17:00:25 Dipak

简单Z索引不起作用

回答

相关问题