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

Question

我试图将元素放置在中心位置，并在一个固定的、居中的框内放置其他位置，该框覆盖（当用户滚动时，覆盖框保持不变）我的整个移动网站。

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

额外的细节包括：

• “覆盖”的宽度和高度取决于用户移动设备的宽度和高度。即宽度：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/