css - 在位于绝对 div 内的图像上强加一些文本

Question

我正在尝试将一些 HTML 文本放在使用灯箱效果弹出的图像上。为此，我正在使用 3 box - 弹出的带有灯箱效果的 div address_box - 框内的 div，它只是一个轮廓图像 address - 我希望将此 div 强加到 address_box 图像上

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 的下方。

我想做的是实现灯箱效果，但不希望文本显示为图像。我采取了正确的方法还是有更好的方法？？

这是粘贴站链接 http://jsbin.com/anehey/1/edit 刚从网上为框架选择了一个示例图像。我希望文本进入框架内..

Answer 1

因为没有提供工作演示，所以我没有得到你在这里尝试做的事情，通常当你想做这样的事情时，使用 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 (与我的回答无关，但我确定了他的要求)