在居中圖像上覆蓋文字？

Question

我想疊加在居中圖像上的文字。下面的方法感到非常哈克但是當窗口固定大小的作品：

$Illustrationwidth: 509px; 

.Illustration { 
    position: relative; 
    text-align: center; 
    margin-top: 60px; 

    &_tricky { 
    position: absolute; 
    text-align: left; 
    top: 24px; 
    left: 290px; 
    width: 300px; 
    } 

    &_answered { 
    position: absolute; 
    text-align: left; 
    top: 73px; 
    left: 290px; 
    width: 300px; 
    } 

    &_attention { 
    position: absolute; 
    text-align: left; 
    top: -30px; 
    left: 96px; 
    } 
} 

這裏是我使用的HTML：

<div class="IntroIllustration"> 
    <img src="images/illustration.png"/> 

    <h2 class="Illustration_attention">header above the image</h2> 
    <div class="Illustration_tricky">an overlayed text</div> 
    <div class="Illustration_answered">another overlayed text</div> 
</div> 

然而，如果用戶改變的寬度，這是行不通的窗戶。

我怎樣才能使這項工作即使窗口可以改變寬度？該解決方案需要適用於IE 10+和最新的兩個Chrome版本。

另外，請教育我，幫我在CSS變得更好:-)

Answer 1

更新：我現在看到你的代碼。我添加了一些背景顏色和字體大小作爲額外功能，以便您更好地瞭解它在做什麼。

使用％和字體大小，而不是大衆的PX和它都將萎縮響應。

#Illustration { 
    position: relative; 
    max-width: 509px; 
    margin: 0 auto; 
} 
.Illustration_attention { 
    font-size: 4vw; 
    font-family: 'Roboto Slab', Rockwell, Serif; 
    font-weight: bold; 
    color: #000; 
    text-align: center; 
} 
.Illustration_tricky { 
    position: absolute; 
    background: green; 
    text-align: center; 
    margin-top: 10%; 
    left: 10%; 
    font-size: 3vw; 
} 
.Illustration_answered { 
    position: absolute; 
    background: white; 
    text-align: center; 
    margin-top: 30%; 
    left: 20%; 
    font-size: 2vw; 
} 
.Illustration img { 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: auto; 
} 

DEMO