Question

<html>
<head>
  <title>Whack a Head</title>
  <link href="styles/main.css" rel="stylesheet">
  <script>
    var objDiv = document.getElementById("applet");
    objDiv.scrollTop = 40;

</script>
  </head>
  
<body background="images/newbackground.png" style="background-size:cover;">
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

x=document.getElementById(“demo”);
x.innerHTML=“Browser inner window width: ” + w + “, height: ” + h + “.”
</script>
<div align="center"  style="margin-top:10px;position:absolute;">
<img src="images/newheaderimage1.png" alt=""style="height:auto;max-width:100%;min-width:50%;margin-top:-10px;">

<div align="center"  style="">
<img src="images/whack.png" alt=""style="width:480px;height:280px;z-index:1;margin-top:-920px;">
</div>

<div id="1" align="center"style="width:100%;height:70%;margin-top:-785px;">
<div align="center" style="display: box;flex-align: center;flex-pack: center;position:relative;overflow-y: hidden; height: 437px; overflow-x: hidden; width:775px;margin-top:1%;" id="applet">

    <iframe style="margin-top:-171px;border-right:0px;border-color:black;border-left:0px; margin-left:-10px;margin-bottom:-50px;" allowtransparency="false" width="800" height="720"  bgcolor=#F11111 src="https://scratch.mit.edu/projects/embed/117167238/?autostart=true&bg=#4c4c4c" allowfullscreen>
	</iframe>
	</div>	
</div>
</div>
</body>
</html>

我设计了一个带有一些图像和iframe的html页面，我希望我的标题图像可以缩放，当我为我的标题图像制作高度suto时，然后在窗口上调整其下面的所有其他内容，它开始向上移动并重叠每个其他？请帮助这里是我目前的代码和屏幕截图，了解发生了什么以及我想要实现的目标？

在您下面找到我的完整HTML代码，请帮忙？number 1 image describes This is what i want to achive even on window resize that the elements dont move and heder image scale

这是什么事情发生的？ Number 2 iage describes what the problem is on window resize

在调整html页面大小时，Div和元素会移动和重叠吗？

0 个答案: