我将图像设置为绝对定位，使用百分比设置，但是在调整窗口大小时，一个图像仍然不会停留

Question

我已经设置了一个内部有很多图像的div。它们都设置为绝对值，它们都有顶部和右侧设置为百分比。除了一个窗口调整大小外，所有图像都保持不变。

这是小提琴：https://jsfiddle.net/a268w7ez/

或者，我已经在下面输入了密码。

我的HTML看起来像这样：

<div id="space">
   <div id="map">
    <img id="layer9" src="./assets/css/images/layer9.png">
    <img id="layer8" src="./assets/css/images/layer8.png">
    <img id="layer7" src="./assets/css/images/layer7.png">
    <img id="layer6" src="./assets/css/images/layer6.png">
    <img id="layer5" src="./assets/css/images/layer5.png">
    <img id="layer4" src="./assets/css/images/layer4.png">
    <img id="layer3" src="./assets/css/images/layer3.png">
    <img id="layer2" src="./assets/css/images/layer2.png">
    <img id="layer1" src="./assets/css/images/layer1.png">
    <img id="cantonica" class="planet" src="./assets/css/images/dot.png">
   </div>
</div>

我的CSS看起来像这样：

#map {
display: block;
position: relative;
top: 2%;
height: 76%;
width: 33%;
margin: auto;
z-index: 0;
}
#layer9 {
height: 100%;
margin: auto;
position: relative;
z-index: 1;
}
#layer8 {
height: 90.11553273427471%;
position: absolute;
top: 5.006418485237484%;
left: 3.465982028241335%;
z-index: 2;
}

// The #layer id's go on like this with different heights, tops, and 
// lefts, all set in percentages.

.planet {
width: 10px;
}
#cantonica {
position: absolute;
top: 12.195121951219512%;
right: 14.120667522464696%;
z-index: 10;
}

首先在我的浏览器上看起来正确，白点图像在正确的位置：

但是当我调整窗口大小时，除了白点之外，所有内容都保持在同一位置：

我将添加更多点（50+），所以我可以调整窗口大小并且它们都保持在同一位置非常重要。

感谢您的帮助。

Answer 1

按照您的模式，看起来您希望每个下层都比前一个更大一点。因为您已将height: 100%;应用于layer9，所以我假设该图层将是容器的完整尺寸。

您可以使用您在所有其他图层上使用的相同CSS样式，但只需将其设置为其容器的完整尺寸：

#layer9 {
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
}

问题的原因是您将relative位置应用于layer9，这意味着如果高度为百分比（100％），它会缩小或增大。< / p>

Updated JSFiddle