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

Question

我试图让每个身体部位（下图中的“右手”和“左手”）下的<ul></ul>s 在用户调整浏览器窗口大小时与身体部位保持对齐。但目前，它们似乎与最外面的容器 <div> solo-figure 保持一致，而不是与图像 <div> figure 保持一致。

也就是说，当调整浏览器窗口的大小时，图像figure.gif 在容器<div> solo-figure 中保持居中，但<ul></ul>s 分别保持100px 和500px，在<div> solo-figure 的左边缘的左侧。

如何调整样式的positions，使<ul></ul>s 留在图像中的身体部位下方？

<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" -->

Answer 1

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

ul {
  list-style-type: none;
  margin: 0px 0px 0px 15px;
  padding: 0px;
}

.solo-figure {
  background: green;
}

.figure {
  position: relative;
  display: flex;
  background: pink;
  width: auto;
  border: solid 2px black;
  width: 50%;
  margin: auto;
}

.main-image {
  width: 100%;
}
.possessions {
  border: solid 2px dodgerblue;
  border-radius: 4px;
  top: 60%;
  position: absolute;
  padding: 8px;
  transform: translateX(-50%);
}
#body_LeftHand {
  background: salmon;
  width: 150px;
  left: 90%;
}

#body_RightHand {
  left: 10%;
  background: lightblue;
}

.tooltip {
  border: 1px dotted black;
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.tooltipimage {
  position: absolute;
  visibility: hidden;
  z-index: 1;
}

.tooltip:hover .tooltipimage {
  margin-top: -75px;
  visibility: visible;
}

.zoom_small {
  transition: transform .2s;
  width: 88px;
}

.zoom_small:hover {
  transform: scale(3.0);
  z-index: 999;
}

<div class="solo-figure">
  <div class="figure">
    <img class="main-image" src="https://www.ocetacea.net/BoyAndDog/img/figure.gif">

    <div class="possessions" id="body_RightHand">
      <ul>
        <li>
          <div class="tooltip">Plastic Bag<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/BagPlastic.gif" /></span></div>
          <ul>
            <li>
              <div class="tooltip">Plastic Bag<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/BagPlastic.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Canned Vegetables<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/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="https://www.ocetacea.net/BoyAndDog/img/cards/items/BottlePlastic.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Plastic Bottle<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/BottlePlastic.gif" /></span></div>
            </li>
          </ul>
        </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="https://www.ocetacea.net/BoyAndDog/img/cards/items/ShotgunSB.gif" /></span></div>
          <ul>
            <li>
              <div class="tooltip">Shotgun Shell<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/Shotgun-Round.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Shotgun Shell<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/Shotgun-Round.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Shotgun Shell<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/Shotgun-Round.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Shotgun Shell<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/Shotgun-Round.gif" /></span></div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- class="possessions" id="LeftHand"-->

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