css：漂浮在居中圖像上的文字

Question

頁面顯示橫幅圖像，該圖像設置爲浮動，以便重新調整頁面的大小以使橫幅居中。

我想顯示一些文字，它們將位於橫幅圖像的相對於橫幅左下角的位置。期望的是，當頁面重新調整大小並且橫幅圖像移動時，文本也會移動。 （文本將根據腳本中設置的某些條件而改變。）

試驗css，我可以在圖像上獲取文本，但在頁面大小調整時它不會移動。讀取其他人做了什麼，我設置了一個div作爲圖像的佔位符。文本被設置在一個

和我的這個選擇器的CSS位置被設置爲「相對」。我知道css的作品，因爲我可以改變文本的顏色和大小等，但我爲文本設置的任何css位置都不會改變文本float特性！

這是我通過php腳本呈現的代碼。任何人有一個想法這裏有什麼不對？

<!-- html --> 
<div id="wbr_logo" align="center"></div> 

<!-- later on down the script.. --> 
<?php 
function HeaderTitle($cTitle='') 
{ 
?> 
    <div class="wbr_logo" ><H1><?php echo $cTitle;?></H1></div> 
<?php 
} 

<!-- css --> 

.wbr_logo { 
position:relative; 
    height: 200px; 
    background-image: url("/ADMIN/images/banner.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

.wbr_logo H1 { 
position:relative; 
color:red; 
} 

---

下面的作品起到了很好（有非常感謝DMCS）

<div class="wbr_logo"><h1><div id="floating_text"></div></h1></div> 

function HeaderTitle($cTitle='') 
{ 
    ?> 
     <script type="text/javascript"> 
      $('#floating_text').html("<?php echo $cTitle;?>"); 
     </script> 
    <?php 
} 

.wbr_logo { 
    position: relative; 
    width: 1260px; 
    height:180px; 
    margin: 0 auto; /* centers it */ 
    background-image: url("/ADMIN/images/wbs_admin_banner.png"); 
} 

#floating_text { 
    position: absolute; 
    left: 2px; 
    bottom: 2px; 
    color:white; 
} 

Answer 1

<div class="wbr_logo"><div class="floating_text">Title here</div></div> 


.wbr_logo { 
    position: relative; 
    width: imageWidth + 'px'; 
    margin: 0 auto; /* centers it */ 
    background-image: url("/ADMIN/images/banner.png"); 

} 

.floating_text { 
    position: absolute; 
    left: 2px; 
    bottom: 2px; 
}