我希望能够在我的div 保持其在页面上的位置并将大小调整为我声明的宽度和高度的百分比时调整窗口大小。
.HTML：
<body>
<div class="view">
<div class="Tree">
<img id="tree" src="img/tree.png">
</div>
<div class="Ground">
<div class="g"></div>
</div>
</div>
</body>
.CSS：
.Tree {
position: absolute;
}
.Tree #tree {
position: relative;
height: 75%;
width: 75%;
left: 30%; }
.Ground {
z-index: 2;
width: 100%;
height: 100%; }
.Ground .g {
background-color: green;
opacity: .5;
position: relative;
height: 50%;
width: 100%; }
树保持恒定，但是当窗口在我的Macbook上最大时，它会向左滑动一点。地面元素垂直占据页面的一半，我希望它只从顶部放置 50%。当我尝试将"顶部"样式应用于其中任何一个时，没有任何反应。我知道这是因为 #tree 是相对于 的。树和我不声明高度/宽度。我不声明 h/w，因为它会使我的 #tree 图像关闭。
谢谢你的帮助！
编辑，添加说明：
我希望div 根据窗口宽度调整大小。我不希望他们改变左边的位置。我希望能够设置一个"top"%，因为我目前不能。
小提琴：https://jsfiddle.net/sqdgzbp6/
请注意这个网站：anniwang.com，如果你调整整个窗口的大小，绘图似乎也会调整大小，但它们不会失去它们在页面上的位置。我想重现与她相似的效果。
由于.Tree是绝对定位的元素，因此它需要显式设置高度/宽度，否则没有百分比的孩子将没有任何百分比可以计算其百分比，因此在此示例中，我给了它一个高度，现在top就可以了。
.Tree {
position: absolute;
height: 100%;
width: 100%;
}
#tree {
position: relative;
height: auto;
width: 60%;
left: 30%;
top: 20%;
}
.Ground {
z-index: 2;
width: 100%;
height: 100%;
}
.Ground .g {
background-color: green;
opacity: .5;
position: relative;
height: 50%;
width: 100%;
}<div class="view">
<div class="Tree">
<img id="tree" src="http://www.placehold.it/200/100">
</div>
<div class="Ground">
<div class="g"></div>
</div>
</div>从声音上看，您希望div在之前设置大小为50%时停止调整大小。请记住，这只是窗口屏幕的 50%，因此无论窗口有多大或多小，它都会始终缩放到您正在查看的任何内容的 50%。如果您希望修复它，您可以使用500px这样它不会移动，因为它设置为固定的 500。
希望这有帮助。