时间戳

首页 > 解决方案 > 我将图像设置为绝对定位，使用百分比设置，但是在调整窗口大小时一张图像仍然没有保留

css - 我将图像设置为绝对定位，使用百分比设置，但是在调整窗口大小时一张图像仍然没有保留

问题描述

我已经设置了一个 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+），所以我可以调整窗口的大小并且它们都保持在同一个位置非常重要。

我在这里先向您的帮助表示感谢。

标签： csshtmlcss-positionwindow-resize

解决方案

按照您的模式，看起来您希望每个较低层都比前一层大一点。因为您已经应用了height: 100%;to layer9，所以我假设该层将是容器的全尺寸。

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

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

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

更新了 JSFiddle

推荐阅读