为什么同一容器中的两个绝对定位的元素不重叠>

问题描述

在下面的情况中，我有一个页脚元素，尽管它绝对定位，但在它与同样绝对定位的视频元素的边缘之间仍然有很小的余量。我的理解是，因为页脚的位置绝对正确，因此应该忽略所有其他元素，并将其放置在flex容器的末尾。并且由于其宽度及其父容器的宽度都设置为100vw，因此它们应该完全重叠。我想念什么？

#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

#content {
  position: absolute;
  display: flex;
  color: #f1f1f1;
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  z-index: 1;
  margin: 0;
  padding: 0;
  font-family: 'Alata',sans-serif;
}

nav {
  display: flex;
  justify-content: space-around;
  align-self: flex-start;
  width: 100%;
  height: 20vh;
  align-items: center;
}

a {
  color: white;
  text-decoration: none;
  padding: 10px;
  border-radius: 15%;
}

a:hover {
  background-color: white;
  color: black;
}

#centerblock {
  align-self: center;
  position: absolute;
}

.myButton {
  position: absolute;
  bottom: 40vh;
  Box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: transparent;
  border-radius: 6px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
}

.myButton:hover {
  background-color: transparent;
}

.myButton:active {
  position: absolute;
  bottom: 39.9vh;
}

footer {
  height: 15vh;
  width: 100vw;
  background-color: black;
  position: absolute;
  align-self: flex-end;
}

<html>

<head>
  <link href="testtube.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
</head>

<body>
  <div id=content>
    <nav>
      <a href='#'>About</a>
      <a href='#'>Services</a>
      <a href='#'>Portfolio</a>
    </nav>

    <div id=centerblock>
      <h1>Joe Iannotta.me</h1>
    </div>

    <footer>
      <a href='#'>Facebook</a>
    </footer>
  </div>


  <video autoplay muted loop src='Pexels%20Videos%201531418.mp4' id=myvideo>
        </video>
</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flexbox html position