0

私は要素を中央に配置しようとしています。また、固定された中央のボックス内の他の位置に配置しようとしています。このボックスは、モバイルサイト全体をオーバーレイします（ユーザーがスクロールすると、オーバーレイボックスは配置されたままになります）。

私が達成しようとしていることを示すために、画像図を添付しました。 ダイアグラム

追加の詳細は次のとおりです。

  • 「オーバーレイ」の幅と高さは、ユーザーのモバイルデバイスの幅と高さに依存します。すなわち、幅：80％; 高さ：60％;。
  • 図の右上隅にある画像を、自分のサイトでは常にそのように（可能な限りその隅に）配置したいと思います。

どんな助けでも大歓迎です。乾杯。

4

1 に答える 1

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/

于 2012-12-29T19:05:10.433 に答える