2 divのコンテンツの配置方法は？

Question

これはルーキーの問題かもしれませんが、私は本当にそれを解決することはできません。 私は写真を持っているdivと写真も持っている別のdivを持っています。 親divの写真と子divの写真のサイズを変更できました。

<div style="width:100%; height:100%; position:relative; top: 0px; left: 0px;"> 

      <img style="width:100%" src="img/imgSera/photo1.png" /> 

     <div style="width:30%; height:30%; position:absolute; top: 191px; left: 305px;"> 
      <img style="width:30%" src="img/imgSera/photo2.png" /> 
     </div> 
</div> 

ブラウザのコーナーをドラッグしてサイズを変更すると、ブラウザのサイズが変更されていないときと同じ位置になりたいと思います。私は何が欠けていますか？私は自分自身を理解できたと思う。前もって感謝します！

Answer 1

これで十分でしょう。

  <img style="width:100%" src="img/imgSera/photo1.png" /> 

     <div style="width:30%; height:30%; position:fixed; top: 191px; left: 305px;"> 
      <img style="width:30%" src="img/imgSera/photo2.png" /> 
     </div> 
</div> 

Answer 2

あなたは画像左上のままにしたい場合は、比較的配置のdiv内position:absoluteでtop:0とleft: 0に位置を固定します。その要素にピクセルベースの位置付けがあり、そのラッパーはパーセントベースでした。大きな外部画像がウインドウでスケーリングされるにつれて、小さな要素の位置は（ピクセルベースの位置のために）変化するように見えます。

また、内部のコンテナと画像に30％の幅があります。コンテナ自体でサイズを制御できます。だから私はその内部のコンテナを30％に設定しました。外側の容器の幅の30％になります。その内部の画像は100％に設定されているので、30％のコンテナの幅がいっぱいになり、両方の画像はブラウザウィンドウで拡大縮小され、小さな画像はコーナーに残ります。

<div style="width:100%; height:100%; position:relative; top: 0px; left: 0px;"> 
 

 
      <img style="width:100%" src="http://placehold.it/300" /> 
 

 
     <div style="width:30%; height:30%; position:absolute; top: 0; left: 0;"> 
 
      <img style="width:100%" src="http://placehold.it/250/fc0000/000000" /> 
 
     </div> 
 
</div>

https://jsfiddle.net/treetop1500/tdk8ofsr/

あなたは右コーナーでそれをしたくない場合にも、上部と左のためのパーセントを使用することができます。

<div style="width:100%; height:100%; position:relative; top: 0px; left: 0px;"> 
 

 
       <img style="width:100%" src="http://placehold.it/300" /> 
 

 
      <div style="width:20%; height:30%; position:absolute; top: 20%; left: 20%;"> 
 
       <img style="width:100%" src="http://placehold.it/250/fc0000/000000" /> 
 
      </div> 
 
    </div>

https://jsfiddle.net/treetop1500/b34r4rde/

を