Question

我正在尝试将一些HTML文本放在使用灯箱效果弹出的图像上。为此，我使用3 box - 带有灯箱效果的弹出式div address_box - 框内的div，它只是一个轮廓图像地址 - 我希望将此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;
}

“box”属性设置为赋予它灯箱效果，我无法将其从绝对更改为相对。我已经搜索了很多并尝试了定位和z-index但都失败了。该文本只显示在address_box下方。

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

以下是粘贴区链接http://jsbin.com/anehey/1/edit 刚从网上挑选了一个样本图像。我希望文本进入框架内..

Answer 1

由于没有提供工作演示，所以没有得到你想要做的事情，通常当你想做这样的事情时，使用position: relative;作为容器div并使用position: absolute; width: 100%;＆amp; 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（与我的答案无关，但我修正了他所要求的内容）

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

1 个答案: