Div 似乎在随机移动

Question

我有 10 个不同的重叠 div，每当我调整屏幕大小时，元素移动时看起来彼此无关，即使它们都是绝对定位的。

我试过只关注视频 div 和容器 div（这就是为什么它们是仅有的两个具有百分比间距的 div）以保持它们的大小成比例，但经过大约 2 周的摆弄，我似乎无法理解。

感谢任何帮助。 html:

  <html>
<html>
<head>
    <link rel=stylesheet type="text/css" href="grid.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="code.js"> </script>
</head>

<body style="background-color:black">
 <div id="video">
  <video id="content" width=50% height=auto autoplay muted>
    <source src="friend.webm" type="video/webm">
  </video>
</div>
<div class="container" >
    <img src="Clayvision.png" width=100% height=auto>
</div>
<div id="hand">
    <video id ="control">
        <source src="hand1.webm" type="video/webm">
    </video> 
</div>
<div id="load">
        <video id ="loading" muted autoplay loop>
        <source src="Loading.webm" type="video/webm">
    </video>
</div>
<div id="email">
        <a href="noahmreiner@gmail.com">
        <video id ="gmail" >
        <source src="gmail.webm" type="video/webm">
        </a>
</div>
<div id="cv">
        <a href="https://drive.google.com/file/d/1-taF_MrzsHWSm05RJ5EyMe1Y0eZkFcTm/view?usp=sharing">
        <video id ="resume">
        <source src="resume.webm" type="video/webm">
        </a>
</div>
<div id="channel"></div>
</div>

</body>

</html>

#video {
    position: absolute;
    top: 10%;
    right:0;
    bottom: 0;
    left: 60%;
    margin:0;
    overflow: 0;
    background-color:  transparent;
    background-position: cover;

}

.container {
    position: absolute;
    top: 0;
    right:0;
    bottom: 0;
    left: 0;
    overflow: 0;
    margin:0;
    background-color: transparent;
    background-position: cover;
}

#hand{
    height:100px;
    width:300px;
    position: absolute;
    top: 100px;
    right:100px;
    bottom: 600px;
    left: 200px;
    margin:auto;
    background-color: transparent;
}

#load{
    height:100px;
    width:300px;
    position: absolute;
    margin:auto;
    background-color: transparent;
}

#email{
    height:100px;
    width:100px;
    position: absolute;
    top: 550px;
    right:600px;
    bottom: 0px;
    left: 00px;
    margin:auto;
    background-color: transparent;
}
#cv{
    height:100px;
    width:300px;
    position: absolute;
    top: 430px;
    right:700px;
    bottom: 0px;
    left: 00px;
    margin:auto;
    background-color: transparent;
}




#channel {
    height:500px;
    width:500px;
    position: absolute;
    top: 0;
    right:00;
    bottom: 0;
    left: 0;
    margin:auto;
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

.grid {
    margin:0;
    padding:0;
    border:none;
    outline:1px solid white;
    display:inline-block;
}


#button1{
    position: absolute;
    top: 200px;
    right:0px;
}

#button2{
    position: absolute;
    top:130px;
    right:0px;
}

Answer 1

绝对定位的元素会根据距window边界的固定距离移动。因此，当您调整 window 的大小时，所有 div 将随机移动，因为它们之间没有相对移动。要解决这个问题，只需将所有 postition: absolute 更改为

position: relative;

然后使用像css grid or flexbox这样的网格系统。

Div 似乎在随机移动

Divs keep moving around seemingly at random

html

css

overlapping