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内的位置固定为top:0和left: 0，position:absolute。你在该元素上有一些基于像素的定位，它的包装是基于百分比的。因此，随着较大的外部图像与窗口缩放（作为百分比），较小元素的定位似乎改变（由于其基于像素的位置）。

您的内部容器和图像的宽度也是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/

如何定位2个div的内容？

2 个答案: