将元素定心和定位在居中的固定位置div / overlay-box中

Question

我正在尝试集中放置元素，并且在一个固定的居中框中的其他位置覆盖（当用户滚动时，覆盖框保持不变）我的整个移动网站。

我附上了一张图片图来展示我想要实现的目标：

额外的详细信息包括：

• 'overlay'的宽度＆amp;高度取决于用户移动设备的宽度和高度。即宽度：80％;高度：60％;.
• 我希望图表右上角的图像始终在我的网站上（尽可能远离角落）。

非常感谢任何帮助。欢呼声。

Answer 1

查看代码。这主要需要使用相对和绝对定位。您可以调整一下以满足您的需求

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

我也加了小提琴。 http://jsfiddle.net/nQvEW/176/