固定位置が最上部になりません。

Question

お世話になります。
サイト模写をしている初心者コーダーです。ヘッダーにCSSでpositionにfixedを指定して、z-indexの数値を10に設定しました。しかし、固定位置が最上部になりません。どうすれば固定位置が最上部になりますか？

iSaraというサイトの模写をしています。URLは下記です。
https://isara.life/

<header>
        <div class="container">
            <div class="headerimage_container">
                <img src="iSARA_img/isaralogo.png" alt="iSARA" class="isara_headerlogo">
            </div>
            <div class="header_text">
                <p>バンコクのノマドエンジニア講座</p>
            </div>
            <div class="otoiawase_shiryouseikyu">
                <a href="">お問い合わせ/資料請求はこちら</a>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="first-section">
            <p class="top-text">プログラミングで<br>人生の安定を手に入れよう</p>
            <img src="iSARA_img/isaralogo.png" alt="iSARA">
            <p class="bottom-text">バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
        </div>

        <div class="second-section">
            <p class="one">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p>
            <p class="two">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p>
            <a href="" class="three">お問い合わせ＆資料請求はこちら</a>
            <p class="four">第４期生：2018年12月３日 ~ 2018年12月22日  ＊締め切りました</p>
            <p class="five">第５期生：2019年４月8日 ~ 2019年4月27日　＊締め切りました</p>
            <p class="six">第６期生：資料請求受付中です</p>
                <div class="SNS_button">
                    <div class="twitter-button">
                        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">
                        Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                    </div>
                    <div class="facebook-button">
                        <div id="fb-root"></div>
                        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"></script>
                        <div class="fb-like" data-href="https://isara.life/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
                    </div>
                </div>
        </div>

body {
    width: 100%;
    margin: 0;
}

header {
    z-index: 10;
    position: fixed;
    background-color: #ffffff;
    opacity: 1;
    width: 100%;
}

header .container {
    height: 100px;
}

header .container .headerimage_container {
    padding-left: 90px;
    display: inline-block;
}

header .container .headerimage_container img {
    height: 50px;
    
}

.header_text {
    display: inline-block;
    position: relative;
    bottom: 10px;
}

.header-text p {
    margin: 0;
    font-weight: bold;
}

.otoiawase_shiryouseikyu {
    display: inline-block;
    position: relative;
    bottom: 15px;
    left: 500px;
    color: #ffffff;
    background-color: #D84940;
    padding: 15px 35px;
    border-radius: 30px;
}

.otoiawase_shiryouseikyu a {
    text-decoration: none;
}

.first-section {
    position: relative;
    top: 100px;
}

.first-section .top-text {
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    line-height: 130%;
}

.first-section img {
    display: block;
    margin: 0 auto;
    width: 315px;
    height: 100px;
}

.first-section .bottom-text {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    position: relative;
    top: 30px;
}

.second-section {
    position: relative;
    text-align: center;
    top: 200px;
    background-color: #EBB94D;
    padding: 35px;
}

.second-section .one,
.second-section .four,
.second-section .five,
.second-section .six {
    color: white;
}

.second-section p {
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.second-section .three {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    margin: 50px auto;
    background-color: #D84940;
    padding: 35px 290px;
    border-radius: 55px;
    color: white;
}

.second-section .two {
    background-color: white;
    color: #D84940;
    width: 41%;
    border-radius: 6px;
    margin-top: 20px;
}

.second-section .one {
    line-height: 35px;
}

.second-section .four,
.second-section .five,
.second-section .six {
    letter-spacing: 3px;
    font-size: 20px;
    line-height: 60px;
}

.second-section .twitter-button,
.second-section .twitter-button {
    float: left;
    margin-right: 5px;
}

.third-section {
    height: 590px;
}

.third-section .title {
    font-size: 20px;
}

Comments

[m.ts10806]

「透過」とは？現在提示されているものだと特に透過という現象は起きてないように思います。
現状が分かる画面キャプチャの添付と、「こういう風にしたい」と要件を具体的に記載していただけますか？

[yoshinavi]

提示のコードでは、症状が再現されません。影響を与えそうなコードも無いように思われます。
提示以外のコードが影響しているかと思われます。

[退会済みユーザー]

すみません、体調を崩していて遅くなりました。
>mts10806様
画面キャプチャを添付いたしました。ヘッダーの背景をサイトの最上部にまで広げたいのです。
>yoshinavi様
「透過」という表現が不適切でした。お詫びを申し上げます。

[m.ts10806]

これは「透過」というより「固定位置が最上部にならない」ですね。
タイトル含めて調整された方があとから見た人も混乱が少ないと思いますのでご対応いただければと。

[退会済みユーザー]

>mts10806様
対応しました！

[yoshinavi]

提示のコードでは、症状が再現されません。影響を与えそうなコードも無いように思われます。
提示以外のコードが影響しているかと思われます。

[退会済みユーザー]

>yoshinavi様
何度もすみません。
他の部分のコードを追加いたしました。

Answer 1

"透過"がどんな現象を指しているのか曖昧なので自信がないのですが、もしヘッダの右のほうに背景がついていないことを言っているのであれば、headerタグにwidth:100%を設定すればよいと思います。
違う現象のことであれば、もうちょっと具体的に説明してください。

Comments

[退会済みユーザー]

widthを100%にしたところ、ヘッダーの右の方に背景がつきました。ありがとうございます！
ヘッダーの最上部にまで背景を広げたいのです。

[moredeep]

提示されているコードでは上に張り付いているように見えます。再現する最小のコードを提示できますか？

[m.ts10806]

私の手元でも最上部にくっついていました。

[退会済みユーザー]

>moredeep様
>mts10806様

遅くなりましてすみません。他の部分のコードを追加いたしました。

[dit.]

headerにtop:0;追加するとか？

[moredeep]

firefoxで見たらheaderにtopが35ついていました。headerにtop:0でとりあえず上張り付きにはなりますが、headerとその下のdivとの間に空間が空き、その下のdivのtopを減らせば元々上に張り付いていたchromeではheaderとdivが被っちゃう？
申し訳ないのですがちょっと私の手には負えなさそうです。。

[退会済みユーザー]

>dit.様
headerにtop:0;を追加しました。
>moredeep様
承知しました。お気になさらず。

皆様親身になっていただきありがとうございます。自力で解決できました。