Question

我正在使用具有固定位置的视频标记作为我页面顶部的背景。现在我想在它下面放一个列表，但我的列表没有良好的定位，而是有绝对位置。我不知道我的代码在哪里错了。

我该怎么做才能解决这个问题？

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

这是因为.mycontent位于绝对定位的.myvideo div内。尝试重构HTML，如下所示：

<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>

在原始HTML中，实际上.mycontent具有绝对定位，而不是列表。

如何在页面中的视频背景下放置列表？

1 个答案: