Question

我希望能够调整窗口大小，同时我的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％。当我尝试应用顶级＆＃39;任何一种风格都没有发生。我知道这是因为#tree是相对的.Tree而我并没有声明高度/宽度。我没有声明h / w，因为它会让我的#tree图像关闭。

感谢您的帮助！

编辑，补充说明：

我希望div根据窗口宽度调整大小。我不希望他们改变他们的左派。我希望能够设置一个顶级的＆＃39; ％，因为我现在不能。

小提琴：https://jsfiddle.net/sqdgzbp6/

在本网站上注意：anniwang.com如果您调整整个窗口的大小，图纸似乎也会调整大小但是它们不会在页面上放松。我想重新创造一种类似于她的效果。

Answer 1

根据它的声音，当你之前设置的大小为50％时，你希望div停止调整大小。请记住，这只是窗口屏幕的50％，因此无论窗口有多大或多小，它总是可以扩展到您正在查看的任何内容的50％。如果您想要修复它，可以使用500px，因为它设置为固定的500，所以它不会移动。

希望这有帮助。

Answer 2

由于.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 / div图像不移动，同时还允许它们从顶部

2 个答案: