Html 容器和包含分区的相对v.s.绝对定位

我试图在用户调整浏览器窗口大小时，使每个身体部位下的

保持和身体部位对齐（下图中的“右手”和“左手”）。但目前，它们似乎与最外层的容器保持一致，而不是与图像保持一致

也就是说，当浏览器窗口按我所希望的那样调整大小时，图像

figure.gif

保持在容器中

solo figure
的中心位置，但是
分别保持在
左边缘左侧的100px和500px

如何调整样式的
位置
，使
停留在图像中的身体部位下方



#主体带{边框：无；左侧：100px；位置：绝对；顶部：340px；}
#身体_脚{边框：无；左：100px；位置：绝对；顶部：100px；}
#body_LeftHand{边框：无；左侧：500px；位置：绝对；顶部：340px；}
#body_LeftShoulder{边框：无；左：100px；位置：绝对；顶部：100px；}
#正文_右侧{边框：无；左侧：100px；位置：绝对；顶部：340px；}
#身体右肩{边界：无；左：100px；位置：绝对；顶部：100px；}
#躯干{边框：无；左侧：100px；位置：绝对；顶部：100px；}`
div.figure{位置：相对；宽度：自动；}
div.properties{文本对齐：左；位置：绝对；}
div.solo-figure{高度：710px；边距：auto；}


塑料袋

塑料袋
罐装蔬菜
罐头肉
塑料瓶
塑料瓶
塑料瓶




泵动式霰弹枪

猎枪炮弹
猎枪炮弹
猎枪炮弹
猎枪炮弹



解决方案是使用相对于图像容器的百分比进行定位。调整页面大小时，图像将调整大小，同时保持其纵横比。信息面板将保持其大小，但将定位到图像中的等效位置


ul{
列表样式类型：无；
保证金：0px 0px 0px 15px；
填充：0px；
}
.独角戏{
背景：绿色；
}
.图{
位置：相对位置；
显示器：flex；
背景：粉红色；
宽度：自动；
边框：纯色2px黑色；
宽度：50%；
保证金：自动；
}
.主图像{
宽度：100%；
}
.财产{
边框：实心2倍道奇蓝；
边界半径：4px；
最高：60%；
位置：绝对位置；
填充：8px；
转化：translateX（-50%）；
}
#左手身体{
背景：鲑鱼；
宽度：150px；
左：90%；
}
#右侧车身{
左：10%；
背景：浅蓝色；
}
.工具提示{
边框：1px点黑色；
光标：指针；
显示：内联块；
位置：相对位置；
}
.工具提示图像{
位置：绝对位置；
可见性：隐藏；
z指数：1；
}
.工具提示：悬停.工具提示图像{
利润上限：-75px；
能见度：可见；
}
.zoom_small{
转变：转变2；
宽度：88px；
}
.zoom_small：悬停{
变换：比例（3.0）；
z指数：999；
}



塑料袋


塑料袋


罐装蔬菜


罐头肉


塑料瓶


塑料瓶


塑料瓶






泵动式霰弹枪


猎枪炮弹


猎枪炮弹


猎枪炮弹


猎枪炮弹




你能用图像创建一个片段，以便其他人更容易找到解决方案吗？我的第一个猜测是尝试使用百分比而不是像素。我不知道这是否能满足你的需要@RichardHunter，但请尝试一下，谢谢，@RichardHunter！但是纵横比并没有保持不变——鲑鱼色的区域，即变得越来越窄，越来越宽，但在调整窗口大小时保持相同的高度——请参见：[link]（ocetacea.net/BoyAndDog/figure test.html），我必须承认，我不完全理解需要什么。我的建议是试着自己创建一个片段，然后我们可以看一看。理查德，我道歉。我是Mac用户，在Safari上进行开发工作，然后对Chrome、Firefox和Opera进行必要的修改。然后，我拿出一台旧的Windows笔记本电脑，对IE进行必要的修改。我刚刚在除IE之外的所有浏览器上测试了您的解决方案，它按照您的说法工作；只有在Safari上，图像才没有保持其纵横比——我还不知道这是为什么。因此，我将把你的解决方案标记为一个好的解决方案；谢谢
<style>
    #body_Belt { border:none; left:100px; position:absolute; top:340px; }
    #body_Feet { border:none; left:100px; position:absolute; top:100px; }
    #body_LeftHand { border:none; left:500px; position:absolute; top:340px; }
    #body_LeftShoulder { border:none; left:100px; position:absolute; top:100px; }
    #body_RightHand { border:none; left:100px; position:absolute; top:340px; }
    #body_RightShoulder { border:none; left:100px; position:absolute; top:100px; }
    #body_Torso { border:none; left:100px; position:absolute; top:100px; }`

    div.figure { position:relative; width:auto; }
    div.possessions { text-align:left; position:absolute; }
    div.solo-figure { height:710px; margin:auto; }
</style>

<div class="solo-figure">
    <div class="figure">
        <img src="img/figure.gif" height="700">

        <div class="possessions" id="body_Torso">
        </div><!-- class="possessions" id="Torso"-->
        
        <div class="possessions" id="body_RightShoulder">
        </div><!-- class="possessions" id="RightShoulder"-->
            
        <div class="possessions" id="body_LeftShoulder">    
        </div><!-- class="possessions" id="LeftShoulder"-->

        <div class="possessions" id="body_RightHand">
            <ul>
                <li>
                    <div class="tooltip">Plastic Bag<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/BagPlastic.gif" /></span></div>
                    <ul>
                        <li><div class="tooltip">Plastic Bag<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/BagPlastic.gif" /></span></div></li>
                        <li><div class="tooltip">Canned Vegetables<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/CannedVegetable.gif" /></span></div></li>
                        <li><div class="tooltip">Canned Meat<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/CannedMeat.gif" /></span></div></li>
                        <li><div class="tooltip">Plastic Bottle<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/BottlePlastic.gif" /></span></div></li>
                        <li><div class="tooltip">Plastic Bottle<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/BottlePlastic.gif" /></span></div></li>
                        <li><div class="tooltip">Plastic Bottle<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/BottlePlastic.gif" /></span></div>
                </li>
            </ul>
        </div><!-- class="possessions" id="RightHand"-->

        <div class="possessions" id="body_LeftHand">
            <ul>
                <li>
                    <div class="tooltip">Pump Action Shotgun<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/ShotgunSB.gif" /></span></div>
                    <ul>
                        <li><div class="tooltip">Shotgun Shell<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/Shotgun-Round.gif" /></span></div></li>
                        <li><div class="tooltip">Shotgun Shell<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/Shotgun-Round.gif" /></span></div></li>
                        <li><div class="tooltip">Shotgun Shell<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/Shotgun-Round.gif" /></span></div></li>
                        <li><div class="tooltip">Shotgun Shell<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/Shotgun-Round.gif" /></span></div></li>
                    </ul>
                </li>
            </ul>
        </div><!-- class="possessions" id="LeftHand"-->

        <div class="possessions" id="body_Feet">                
        </div><!-- class="possessions" id="Feet"-->

    </div><!-- class="figure" -->
</div><!-- class="solo-figure" -->