Как разместить текст html поверх таблицы фломастеров?

Question

Вот мой простой jsFiddle. Я ищу, чтобы разместить текст HTML поверх диаграммы флота. Или положите карту флота в фоновом режиме (в зависимости от того, как вы думаете об этом).

HTML:

<div id="wrapper"> 
    <h1>Place me on top please. How?!</h1> 
    <div id="placeholder"></div> 
</div> 

CSS:

#wrapper { position:relative; } 
h1 { z-index:100; color:blue; font-size:5em; margin:0; line-height:0.9em; } 
#placeholder { 
    width:500px; 
    height:300px; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
} 

JS (см jsFiddle для отдыха):

$(document).ready(function(){ 
    chart = $.plot($("#placeholder"),data,options); 
}); 

Answer 1

Вы должны добавить position: absolute; к h1 в вашем CSS ...

Примечание: г-индекс работает только на (позиция: абсолютная, позиция: относительная или позиция: фиксированная).

source of this quoted text

#wrapper { position:relative; } 
h1 { z-index:100; color:blue; position: absolute; font-size:5em; margin:0; line-height:0.9em; } 
#placeholder { 
    width:500px; 
    height:300px; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
} 

:::: JSFIDDLE ::::

Answer 2

Вы могли бы м ака позиционирования h1 абсолютного

h1 { z-index:100; color:blue; font-size:5em; margin:0; line-height:0.9em; position:absolute;} 

Работала для меня