0

次のボタンをクリックすると、ブラウザがサーバーに新しい画像のURLを要求し、jQueryを使用して画像を読み込むWebサイトを作成しています。リクエストが発生したときに、古い画像の上に読み込み中の画像を表示したい（Facebookなど）。

HTML

<div1>
    <img id="rel" src="http://localhost/images/original.jpg" height="400" width="500"></img>
    <div2>
        <img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"></img>
    </div2>
</div1>

CSS

div1
{
    position:relative;
}

div2
{
    position:absolute;
    top:50%;
    left:50%;
}

jsFiddleでこれを試してみると、画像が他の画像の上に表示されません。私は基本的なCSSしか知りません。上記のコードの失敗を許してください。

4

4 に答える 4

3

DIVの幅と高さを定義します。このように書いてください：

.div2
{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-25px;
  margin-top:-20px;
  width:50px;
  height:40px;
}

たとえば、このhttp://jsfiddle.net/JYduU/を確認してください

于 2013-01-26T17:36:45.323 に答える
0

HTMLdiv1をにdiv2変更します

<div class=div1><img id="rel" src="http://localhost/images/original.jpg" height="400" width="500">      </img>
<div class=div2><img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"></img>
</div2></div1>

.div1
{
  position:relative;
 }
.div2
{
  position:absolute;
  top:50%;
  left:50%;
}

画像タグにidを使用している場合は、両方に同じIDを指定しないでください

于 2013-01-26T17:37:55.297 に答える
0 
<div id="parentDiv">
   <img id="rel1" src="http://localhost/images/original.jpg" height="400" width="500" />
   <img id="rel2" src="http://localhost/images/loading.jpg" height="40" width="50" />
</div>

CSS：

#parentDiv
{
   position:relative;
}

#rel2
{
   position:absolute;
   top:50%;
   left:50%;
}

コードにいくつかのエラーがありました：

<img></img> should be <img />

同じIDを2つ持つべきではありませんrel

両方の画像を同じ親Divにposition:relative;配置し、2番目の画像がページ全体ではなく、この親Divに対して絶対的であると見なされるようにする必要があります。

これをチェックしてくださいhttp://jsfiddle.net/Kfxha/

2番目の画像を中央に配置するには、数学的な計算を行う必要があります。

top = ( rel1.height - rel2.height ) / 2 =  ( 400 - 40 ) / 2 = 180px
left = ( rel1.width - rel2.width ) / 2 = ( 500 - 50 ) / 2 = 225px
于 2013-01-26T17:38:26.523 に答える
0

マークアップが正しくありません

    <div1><img id="rel" src="http://localhost/images/original.jpg" height="400" width="500"/>
    <div2><img id="rel" src="http://localhost/images/loading.jpg" height="40" width="50"/>
    </div2></div1>

のようにする必要があります

   <div id="div1"><img id="rel1" src="http://localhost/images/original.jpg" height="400" width="500"/>
   <div id="div2"><img id="rel2" src="http://localhost/images/loading.jpg" height="40" width="50"/>
   </div></div>

あなたのCSS

  <style type="text/css">
   #div1 { position:relative; }
   #div2 { position:absolute; top:50%; left:50%; }
 /* some answers here have some tips on better positioning center */

 </style>
于 2013-01-26T17:42:56.983 に答える