

この時ボタンの位置を上にしたいのですがどのようにすれば良いでしょうか？

ファイルフォルダ  
├test.html  
├video  
├back.mp4  
├back.ogv  
├back.webm  
└css  
__└setting.css

[code]

    /*============== 背景動画設定 ===============*/
    
    /*header設定*/
    #header{
        position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
        height: 100vh;/*高さを全画面にあわせる*/
    } 
    
    #video-area{
        position: fixed;
        z-index: -1;/*最背面に設定*/
        top: 0;
        right:0;
        left:0;
        bottom:0;
        overflow: hidden;
    }
    
    #video {
        /*天地中央配置*/
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*縦横幅指定*/
        width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
        height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
        min-height: 100%;
        min-width: 100%;
    }
    
    /*見出し設定*/
    h1{
        /*要素の配置*/
        position:absolute;
        /*要素を天地中央寄せ*/
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        /*見た目の調整*/
        color:#fff;
        text-shadow: 0 0 15px #666;
    }
    
    /*============== ボタンの設定 ===============*/
    /*buttonの設定*/
    .button-001 {
        display: flex;
        justify-content: center;
        width: 250px;
        margin:0 auto;
        padding: .9em 2em;
        border: 1px solid;
        border-radius: 25px;
        background: linear-gradient(to bottom, #87cefa, #0000ff);
        font-size: 1em;
    }
    button:hover {
        transform: scale(1.1);
        }
[/code]

[code]

    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/setting.css">
    </head>
    <body>
        <header id="header">
            <h1>Title</h1>
            <div id="video-area">
            <video id="video" webkit-playsinline playsinline muted autoplay loop>
    <source src="video/back.mp4" type="video/mp4">
    <source src="video/back.ogv" type="video/ogv">
    <source src="video/back.webm" type="video/webm">
    <p>動画を再生できる環境ではありません。</p>
    </video>
    <!--/video-area--></div>
    </header>
    <button class="button-001">ボタン</button>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2023-10-23T00:10:10.743
96551
2023-10-23T00:38:32.837
2023-10-23T00:38:32.837
3060
60169
question
html css
HTMLでボタンの表示位置を変更したい