CODEWITHSUNDEEP
htmlcss
ehsan
ehsan

Reputation: 219

How can I place a list under a video background in a page?

I am using the video tag with a fixed position to use as the background on top of my page. Now I want to place a list under it but my list does not have good positioning and it has instead an absolute position. I do not know where is my code is wrong.

What can I do to fix this problem?

* {
  border: 0;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: white;
}
ul {
  list-style-type: none;
}
.mymenu {
  float: left
}
.mymenu > li {
  background-color: #ff9933;
  float: left;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 0 80px;
}
.mymenu li:hover {
  background: #e62e00;
  cursor: pointer;
}
.mymenu li ul {
  position: absolute;
  left: 415px;
  display: none
}
.mymenu li ul li {
  background-color: #ff6600;
  float: left;
  padding: 0 42px;
  left: 0;
}
.mymenu li:hover ul {
  display: block;
}
/*==================================*/

.myvideo {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: -10;
  overflow: hidden;
  top: 0;
  left: 0;
}
.myvideo video {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
}
.myvideo .mycontent {
  position: absolute;
  height: 100%;
  width: 100%;
  color: #fff;
  background: rgba(0, 0, 0, .2)
}
.clear {
  clear: both;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>

<body>
  <div class="myvideo">
    <video autoplay loop muted>
      <source src="video/Vue%20Js%20Tutorial%20Intro%20with%20TodoList%20-%203%20For%20loops%20and%20if.mp4">
    </video>
    <div class="mycontent">
      <h1>welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, obcaecati.</p>
    </div>
  </div>
  <div class="clear"></div>
  <ul class="menu2">
    <li><a href="#">section 1</a>
    </li>
    <li><a href="#">section 2</a>
    </li>
    <li><a href="#">section 3</a>
    </li>
    <li><a href="#">section 4</a>
    </li>
    <li><a href="#">section 5</a>
    </li>
  </ul>
</body>

</html>

Upvotes: 2

Views: 56

Answers (1)

Good Idea
Good Idea

Reputation: 2831

this is because .mycontent is within the absolutely positioned .myvideo div. Try restructuring the HTML like so:

<body>
  <div class="myvideo">
    <video autoplay loop muted>
      <source src="video/Vue%20Js%20Tutorial%20Intro%20with%20TodoList%20-%203%20For%20loops%20and%20if.mp4">
    </video>
  </div>
  <div class="mycontent">
    <h1>welcome</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, obcaecati.</p>
    <div class="clear"></div>
    <ul class="menu2">
      <li><a href="#">section 1</a>
      </li>
      <li><a href="#">section 2</a>
      </li>
      <li><a href="#">section 3</a>
      </li>
      <li><a href="#">section 4</a>
      </li>
      <li><a href="#">section 5</a>
      </li>
    </ul>
  </div>
</body>

In your original HTML, it's actually the .mycontent that has absolute positioning, not the list.

Upvotes: 1

Related Questions