0

背景画像のある div があり、要件に合わせて正しく配置するのに苦労しています。

divの右下隅をページの中央に配置し、左上隅を左上に配置し、それらの位置を維持しながらさまざまな解像度で調整したいと考えています。

それが理にかなっていることを願っています。

ガイダンスをいただければ幸いです。

4

3 に答える 3

1

問題をより単純にしてから、解決策を示しましょう。

  1. 最初に、ページのちょうど中央に配置するコンテナまたは場所を用意する必要があります。
  2. ここで、この中央の div の右下にある別の div が必要です。

私たちが知っているように、 絶対配置された要素は、最後の相対的に配置された親からその位置の計算を開始します。したがって、中央の div を作成し、その内部に相対的に配置され、右下の div の親として機能するコンテナーを作成します。これで、右下の div をその中に絶対位置で配置できるようになりました。

これがコードのサンプルです。

<div class="center">
    <div class="container">
        <div class="bottomRight">
        </div>
    </div>
</div>

とCSS

body{
   background:#EFEFEF;
}
.center {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
   background:Red;
}

.container{
   position:relative;
   background:yellow;
   height:100%;
 }
.bottomRight{
    position:absolute;
    right:0px;
    bottom:0px;
    background:Blue;
    width:100px;
    height:100px;
 }

JS フィドルのデモ

于 2013-10-17T09:41:35.490 に答える
1

角がページに対して特定の位置になるように要素を配置したい場合は、絶対に配置することができます:

div {
    position: absolute;
      top: 0;
      right: 50%;
      bottom: 50%;
      left: 0;
}

基本的に、これは、ウィンドウのサイズ変更に関係なく、常にエッジの位置を指定します。

于 2013-10-17T09:42:37.720 に答える