2
Ich verwende den Video-Tag mit einer festen Position als Hintergrund oben auf meiner Seite. Jetzt möchte ich eine Liste darunter platzieren, aber meine Liste hat keine gute Positionierung und stattdessen eine absolute Position. Ich weiß nicht wo mein Code falsch ist.Wie kann ich eine Liste unter einem Videohintergrund auf einer Seite platzieren?
Was kann ich tun, um dieses Problem zu beheben?
* {
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>