1

我正在尝试在使用灯箱效果弹出的图像上放置一些 HTML 文本。为此，我使用 3 个框 - 带有灯箱效果的弹出 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;
}

“盒子”属性设置为给它一个灯箱效果，我不能将它从绝对更改为相对。我进行了很多搜索并尝试了定位和 z-index，但都失败了。文本仅显示在 address_box 下方。

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

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

4

1 回答 1

2

因为没有提供工作演示，所以没有得到你想要做的事情，通常当你想做这样的事情时，使用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%;
}

演示（与我的答案无关，但我修复了他的要求）

于 2012-12-08T16:28:49.457 回答