イメージ上のテキストと絶対divを維持する

Question

問題はかなりシンプルなので、私のテキストがイメージ上にあるこのシステムを作りようとしていますが、問題は私のdivが絶対的なので私がしなければ、主要なオーバーホールとなりますので、私は）相対的に任意の提案を

#box_1 { 
    position: absolute; 
} 

#box_1 img { 
    height: 100%; 
    width: 100%; 
    position: relative; 
} 

#box_1 h1 { 
    position: absolute; 
} 

<div id="box_1" class="test_div"><img src="img/scripting.jpg" /><h1>Documentation</h1></div> 

を、それを変更傾けることでいくつかのものを作ったのですか？私は本当に絶対

EDIT画像の上にテキストを保持し、位置のDIVを維持する必要がありますように https://css-tricks.com/wp-content/csstricks-uploads/textoverimageexample.jpg

Answer 1

あなたがz-indexやテキストを使用することができ、ここで例をposition:absolute

#box_1 { 
 
    position: absolute; 
 
} 
 

 
#box_1 img { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
#box_1 h1 { 
 
    position: absolute; 
 
} 
 
#text 
 
{ 
 
    z-index:100; 
 
    position:absolute;  
 
    color:black; 
 
    font-size:24px; 
 
    font-weight:bold; 
 
    bottom: 0; 
 
     left: 0; 
 
     right: 0; 
 
text-align:center; 
 
}

<div id="box_1" class="test_div"><img src="http://www.ew.com/sites/default/files/styles/tout_image_612x380/public/1455655770/homer.jpg?itok=TOtuVefM" /><h1>Documentation</h1> 
 
<p id="text"> 
 
     Hello World! Hello Galaxy ! 
 
    </p></div>