Html 当我调整窗口大小时，网页上的项目不断移动_Html_Css

Html 当我调整窗口大小时，网页上的项目不断移动

html css

Html 当我调整窗口大小时，网页上的项目不断移动,html,css,Html,Css,当我调整浏览器大小时，Html文档中的元素会不断移动。当我调整浏览器大小时，以及当我将窗口拖动到外部显示器时，Html文档中的元素会移动。当我调整窗口大小时，我希望元素保持在原来的位置，如果有任何帮助，我将不胜感激以下是HTML代码： <!DOCTYPE HTML> <html> <head> <title>Udarit.com/home</title> <link href= "MissionImpossible2.c

当我调整浏览器大小时，Html文档中的元素会不断移动。当我调整浏览器大小时，以及当我将窗口拖动到外部显示器时，Html文档中的元素会移动。当我调整窗口大小时，我希望元素保持在原来的位置，如果有任何帮助，我将不胜感激

以下是HTML代码：

<!DOCTYPE HTML>
<html>
<head>
  <title>Udarit.com/home</title>
  <link href= "MissionImpossible2.css"
      rel="stylesheet"
      type="text/css">
</head>
<body>
  <div id="away"> 
    <button id="fix">LOGIN</button>
  </div>  
  <div id="break">
  <div id="lose">
  <form class= you>
    <input id= nuke
           type="search"
           class="searchterm"
           placeholder="search">
   <button id="mama">
   <img id= "reap"
        class="search-icon"
        src="1499177797_Search.svg">
   </button>
 </form>   
 </div>
 </div>
  </body>
</html>

请解释发生这种情况的原因以及如何预防，以备将来使用。

这取决于您的元素在页面上的位置。“登录”按钮保持不变，因为您正在使用像素对其进行定位

表单输入元素正在移动，因为您已使用百分比将其定位在页面上

如果你想让你的网页在不同大小的屏幕上工作，那么最好是更流畅地布局元素。例如，您可以使用

position:absolute

和

right:0

将登录按钮固定在任何浏览器窗口的右侧

你也可以有一个固定宽度的网页，但中间放在中间，有点像桌面视图上的StAc溢出。您可以通过创建一个带有固定with的div，然后将

margin:0 auto

应用于该div，并将元素放入其中，就像容器一样

*{margin:0; padding:0;box-sizing:border-box;}
 #nuke {width:500px;
  height: 50px;
position: relative;
top:50%;
left:30%;
border-style:outset;
border-color:gainsboro;
border-radius: 5px;
background-color:ghostwhite;
}
#reap{position: relative;
            height:30px;
            border-radius: 10px;
border-style: none;
            }

#mama{position: relative;
height: 47px; 
width:40px;
top:10px;
  left: 19.5em;
  border-style: none;
background-color: rgba(0,0,0,0.1);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;}

#hey{width: 180px;
 position: relative;
right:480px;
top:5px;}

#break{position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color:aqua;
background: rgba(51,51,51,0.7);
background-image:url("");
}

#lose{position: relative;
top:50%;}

#away{border-style:hidden;
  height:80px;
 background-color: aqua;
 background-color:rgba(0,0,0,0.1);
  z-index: 1;}

#fix{width:100px;
height: 40px;
position: relative;
left:900px;
top:20px;
color:white;
background-color:blue;
z-index:10;
border-style:none;
border-radius:10px;
font-family:monospace; 
 }