Centering and positioning elements within a centered, fixed position div/overlay-box

Question

I am trying to position elements centrally, and in other positions within a fixed, centered box which overlays (when the user scrolls, the overlay-box stays put) my whole mobile site.

I have attached an image diagram to demonstrate what i'm trying to achieve:

Extra details include:

• The 'overlay' has a width & height dependent upon the width and height of the users mobile device. i.e, width:80%; height:60%;.
• I would like for the image in the top right hand corner of the diagram to always be that way on my site (as far in that corner as possible).

Any help is greatly appreciated. Cheers.

Answer 1

Check out the code. This mostly requires the use of relative and absolute positioning. You can tweak a bit to meet your needs

HTML

<div class="body" style="position:relative">
<div class="box">
    <div class="box1"></div>
    <div style="clear:both;height:20px"></div>
    <div class="child"></div>  
    <div style="clear:both;height:20px"></div>
    <div class="child"></div>  
</div>
</div>​

CSS

.body{
width:400px;
height:250px;
background-color:#888;
}
.box{
width:80%;
height:150px;
border:1px solid #FFF;
position:relative;
margin:auto;
top:10%;
}
.child {
height:10px;
width:50px;
position:relative;
margin:auto;
background-color:red;
}
.box1{
width:10%;
height:10%;
border:1px solid #FFF;
position:absolute;
top:0;
right:0;
}

​ I have added the fiddle too. http://jsfiddle.net/nQvEW/176/