У меня есть изображения, установленные в абсолютное положение, с настройками в процентах, но одно изображение все еще не остается при изменении размера окна

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%).

Обновлен JSFiddle