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

Question

我正在尝试将元素居中定位，并尝试将元素定位在一个固定的居中框内的其他位置，该框覆盖(当用户滚动时，覆盖框保持原样)我的整个移动网站。

我附上了一张图像图来展示我正在努力实现的目标:

额外的细节包括:

• “叠加层”的宽度和高度取决于用户移动设备的宽度和高度。即，宽度:80%；高度:60%;.
• 我希望图表右上角的图像在我的网站上始终保持这种状态(尽可能远地位于该 Angular )。

非常感谢任何帮助。干杯。

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

我也添加了 fiddle 。 http://jsfiddle.net/nQvEW/176/