動画を背景に要素を載せたい

現在、練習としてポートフォリオサイトを作っています。

動画を背景にサイドメニューにあるdrawer_navを載せていたですが、なぜか下に表示されるようになってしまいました。親要素のposition:relativeとposition:absoluteと関係あるのかなと思っておりますが、分かりません。

どなたか分かる方がいましたら、練習中なので優しく教えていただけると助かります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="stylesheet.css">
8    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
9    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
11    <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
12    <script src="script.js"></script>
13    <title>My portfolio</title>
14</head>
15<body>
16    <header>
17        <div class="wrap">
18            <div class="header_wrapper">
19                <video id="video" playsinline autoplay loop muted>
20                    <source src="img/Computer.mp4" type="video/mp4">
21            </div>
22            <!-- グローバルメニュー -->
23            <nav class="drawer_nav">
24                <ul class="drawer_menu">
25                    <li><a href="#">HOME</a></li>
26                    <li><a href="#">WORKS</a></li>
27                    <li><a href="#">SKILLS</a></li>
28                    <li><a href="#">CONTACT</a></li>
29                </ul>
30            </nav>
31            <!-- タイピング -->
32            <div class="typing">
33                <div class="typed_wrap">
34                    <h1><span class="typed"></span></h1>
35                </div>
36            </div>
37            <div class="about_me">
38                <div class="portfolio_img"></div>
39            </div>
40        </div>
41    </header>
42
43</body>
44
45</html>

CSS
1body{
2    margin:0;
3    padding:0;
4}
5.header-wrapper{
6    position: relative;
7}
8.drawer_nav{
9    height:754px;
10    display:block;
11    background-color: rgba(0,0,0,0.80);
12    position: absolute;
13    width: 310px;
14    padding: 45px 0 20px 0;
15    z-index: 9990;
16}
17.drawer_menu{
18    padding:15px;
19}
20.drawer_menu li {
21    list-style: none;  
22    text-decoration: none;
23    border-bottom: solid 1px #444;
24    padding:30px;
25}
26.drawer_menu li a {
27    color:white;    
28    text-decoration: none;
29}
30
31#video{
32    background:url('img/Computer.mp4');
33    width:100%;
34    height:100%;
35    background-size:cover;
36}
37.toggle-btn{
38    background:url('img/menu_icon.png')
39}
40.typing{
41    width:100vw;
42    height:100vh;
43    position: relative;
44}
45.typed_wrap{
46    position: absolute;
47    width:100vw;
48    text-align:center;
49    top:50%;
50    left:50%;
51    transform: translate(-50%,-50%);
52}
53.typed_wrap h1{
54    color:#fff;
55    font-family: 'Times New Roman',Times, serif;
56    font-size:3rem;
57}
58
59.typed ::after{
60    content:"";
61    animation:blink 0.7s infinite;
62}

行動規範の内容に同意します

回答1件

ベストアンサー

まず、イージーミスが多いです、質問するソースも最低限見直しましょう

以下ミスの指摘

htmlのvideoタグが閉じられていません
htmlでは「header_wrapper」CSSでは「header-wrapper」

アドバイスとしては親要素・子要素に関する理解が乏しいかと思います

親要素は.wrapなのでこちらへ「position: relative」
子要素の.header_wrapperと.drawer_navへ「position: absolute;」

CSS
1.wrap{
2    position: relative;
3}
4
5.header_wrapper{
6    position: absolute;
7}
8
9.drawer_nav{
10    position: absolute;
11}
12

イメージとしては
親要素は配列される要素
子要素は配列する要素
としてCSSで指示を出します

投稿2020/08/25 02:38

jinba

総合スコア310

dreamland

2020/08/25 05:18

きめ細かく見ていただき、ありがとうございます。すいません、次からは最低限見直してから投稿します。親要素・子要素の部分に関してはもう少し勉強してみようかと思います。頑張ります。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

動画を背景に要素を載せたい

関連した質問