0

In the case below I have a footer element that, despite it being positioned absolutely, still has a small margin between it and the edge of video element that is also positioned absolutely. My understanding is that because the footer is positioned absolutely it should ignore all other elements and is positioned at the end of the flex container. And since its width, and the width of its parent container are both set to 100vw, they should completely overlap. What am I missing?

#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>
MkMan
  • 1,779
  • 1
  • 14
  • 27
JVI29
  • 11
  • 1
  • 3
    position absolute needs a parent with the position relative. The position absolute will absolute depending on the parents relative position. Both the video and the footer dont have the same parent therefor they cant be overlapped with absolute just with position:fixed. – tacoshy Aug 25 '20 at 23:16
  • Does this answer your question? [Position Relative vs Absolute?](https://stackoverflow.com/questions/10426497/position-relative-vs-absolute) - see the explanations about how how position:absolute works – FluffyKitten Aug 25 '20 at 23:43

0 Answers0