將某些文本置於位於絕對div內的圖像上

我試圖將一些HTML文本放在使用lightbox效果彈出的圖像上。對於這個我使用3 箱 - 在彈出的div與燈箱效果 address_box - 箱內DIV這不過是一種外形像地址 - 我想這個div於address_box圖像將某些文本置於位於絕對div內的圖像上

被強加HTML：

<div class="box"> 
    <div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div> 
    <div id="address_box"><img src="img/address-box.png" /> 
    <div id="address">The address text 
</div> 
</div>

CSS：

.box 
     { 
      position:absolute; 
      top:20%; 
      left:12%; 
      text-align:center; 

      width:940px; 
      height:321px; 
      background:#F9E5B9; 
      z-index:51; 
      padding:10px; 
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
      display:none; 
     } 

.box #move_in_img{ 
float:left; 
margin-left:20px; 
margin-top:50px; 
} 

#address_box{ 
position:relative; 
} 
#address{ 
position:absolute; 
}

「框「屬性設置爲賦予燈箱效果，我無法將其從絕對變爲相對。我搜索了很多，並嘗試了定位和z-index，但都失敗了。文本只出現在address_box下面。

我想要做的是實現燈箱效果，但不希望文本顯示爲圖像。我採取正確的方法還是有更好的方法？

這裏是粘貼bin鏈接http://jsbin.com/anehey/1/edit 剛剛從網絡爲框架選擇了一個示例圖像。我想要文本去框架內..

來源

2012-12-08 ishan

我甚至在閱讀2次後都不明白......你想要做什麼？ –

我想實現一個jQuery的燈箱，一個圖像在一個小窗口中彈出並且頁面的其餘部分淡化了一下。但我不想顯示一個純圖像，但與圖像和一些重疊文本的div。現在問題是，彈出的div已經是絕對的，也許這就是爲什麼我無法在圖像上放置一些重疊的文本。明白了嗎？ – ishan

非常感謝。這對我有用。對你開始的價值做一些調整，我可以得到我想要的文本。雖然我想知道如果這是一個標準的做事方式？再次感謝.... – ishan

我沒有得到你正在嘗試做的事情，因爲沒有提供工作演示，通常當你想做這樣的事情，使用position: relative;爲容器div和使用position: absolute; width: 100%; & bottom: 0;的規定文本的div

HTML

<div class="container"> 
    <img src="#" /> 
    <div class="text"></div> 
</div>

CSS

.container { 
    position: relative; 
    /*Set Height Width Accordingly*/ 
} 

.text { 
    position: absolute; 
    bottom: 0; 
    height: /*Whatever*/; 
    width: 100%; 
}

Demo（與我的答案無關，但我修正了他所要求的）

來源

2012-12-08 16:28:49

我知道這一點，它對我完美的作品。但我的問題是，我已經把容器div定位爲絕對已經是燈箱風格的實現了。反正我提供了演示代碼。你能得到框架內的文字？ – ishan

@ishan哪個框架？它已經在框架內http://jsfiddle.net/3mLX5/ –

你看到底部的文字？地址？我希望該文本在圖像上重疊，以便它看起來在該幀內。問題在於它出現在框架下面。 – ishan

將某些文本置於位於絕對div內的圖像上

回答

相關問題