如何解决Div 似乎是随机移动的
我有 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;
}
解决方法
绝对定位的元素将根据距窗口边框的固定距离移动。因此,当您调整窗口大小时,所有 div 都会随机移动,因为它们不会相对于彼此移动。要解决这个问题,只需将所有 postition: absolute 更改为
position: relative;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。