簡單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索引不起作用

回答

相關問題