Question

I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3
box – the popped out div with lightbox effect
address_box – the div inside the box which is nothing but an outline image
address – i want this div to be imposed upon the address_box image

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;
}

the “box” properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.

What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??

Here is the paste bin link http://jsbin.com/anehey/1/edit
Just picked a sample image from net for the frame. I want the text to go inside the frame..

Answer 1

Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text 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 (Not related to my answer but I fixed what he was asking for)