我是一名插画师，正在为网络做一篇文章，对HTML、CSS和Javascript还很陌生。对于我的基本场景，我需要一个鸟的图像来重叠天空的图像，因为我将在最终版本中简单地设置鸟的动画(拍打翅膀等(。
我做了一个div，里面有山的图像和鸟的图像。使用CSS，我已经成功地将它们与z索引重叠，但我似乎无法获得它们之间关系的相对百分比值(即，我需要天空中某个地方的鸟(。我还找到了一种方法，通过一个标记来控制视口，使整个设计具有响应性，但即使在包含它之后，也不会缩放。我很感激任何帮助——我正试着把注意力集中在定位上，但我所做的一切都不起作用。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id='scene'>
<img class='sky' src='skybox.png'>
<img class='bird' src='bird.png'>
</div>
</body>
</html>
CSS
#scene {
position: relative;
z-index: -1;
}
.sky {
position: relative;
z-index: 1;
}
.bird{
position: relative;
z-index: 2;
/* this is where I'd like to add some percentage that
would be responsive and also put the bird at a certain
place in the sky. Pixel values work to position it but
the top has to be negative even to get it in the sky at
all, and percentages do nothing */
}
您想将父容器放入position: relative，然后将子容器放入position: absolute。这样，您就可以控制它们在父容器中的操作方式。
如果你使用的任何图片都是相同的尺寸，那就容易多了。如果是，你只需这样设置利润率：
.bird, .sky, .sun {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
这里有一个片段供您学习。：(如果你有任何问题，请告诉我！
.scene {
position: relative;
width: 50vw;
height: 50vh;
z-index: 0;
overflow: hidden;
}
.bird, .sky, .sun {
position: absolute;
}
.bird {
border: 1px solid red;
height: 10%;
width: 5%;
bottom: 10%;
left: 20%;
background-color: red;
z-index: 1;
overflow: hidden;
}
.sky {
width: 100%;
height: 100%;
background-color: lightblue;
}
.sun {
top: -10%;
right: -10%;
height: 30%;
width: 20%;
border-radius: 100%;
background-color: yellow;
z-index: 2;
overflow: hidden;
}<div class="scene">
<div class="bird"></div>
<div class="sky"></div>
<div class="sun"></div>
</div>