我是一个插画家，他正在为网络做文章，并且对HTML，CSS和Javascript还是相当新的。对于我的基本场景，我需要一张鸟的图像与天空的图像重叠，因为在最终版本中，我将简单地为该鸟（扇动翅膀等）制作动画。
我制作了一个div，其中包含了山的图像和鸟的图像。使用CSS，我已经成功地将它们与z-index重叠，但是我似乎无法获得相对百分比值来根据它们彼此之间的关系进行操作（即，我需要在天空中的某个位置放置小鸟）。我还查找了一种使整个设计具有响应能力的方法，并带有一个标签来控制视口，但是即使添加了该标签也无法缩放。我将不胜感激-我正尽力将自己的注意力集中在定位上，但我尝试的一切都没有用。
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。这样，您就可以控制它们在父div 内部中的行为。
如果您使用的任何图片具有相同的尺寸，这将更容易lot。如果是这样，则只需像这样设置边距：
.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>