position:relateive abusoluteで配置が崩れる

リキッドデザインのWEBサイトを作成していますが、ヘッダーに対し”WELLCOME”を表記した青色の部分が重なるよう考えています。

#top header{position:relateive};

もしくは

#top {position:relateive};

とした状態で、

.board {position:abusolute};

とすると、メイン画像部分が潰れてしまい(というよりrelateiveを設定していない状態でも.board {position:abusolute};だけでこのようになります。)

CSSだけでpositionの使用を無しに要素同士を重ねるのは難しいでしょうか？
(z-indexも試しましたが機能しないようです)

アドバイス頂ければ幸いです。

<body>
    <section>
    <div  id="top" class="big_bg">
        <header class="main_header">
            <nav>
                <ul>
                    <li><a href="#main">Top</a></li>
                    <li><a href="#works">Works</a></li>
                    <li><a href="#profile">Profile</a></li>
                </ul>
            </nav>
        </header>
        <main id="main">
            <div class="board">
                <h1>WELLCOME</h1> 
                <p><br>
                WEB site</p>
                <h2>SNS</h2>
                <a href=""><img src="./img/twitter.png"></a>
                <a href=""><img src="./img/instagram.png" ></a>
            </div>
            </main>
    </div>
</section>

@charset "utf-8";
html{
    font-size: 2.5vw;
}
* { 
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box;
}

body{
    font-size: 1rem;
    font-family: Impact,Charcoal; 
    color: white;
}
h1{
    font-size: 8vw;
    color: black;
}
h2{
    font-size: 7vw;                   
}
#works, #profile, fotter{
    height: 1080px;        
    background-color: #333333;
}
header{
    background-color: rgba(0,0,255,0.5);
    padding: 0 2%;
    height: auto;
    justify-content: space-between;
}
a{
    text-decoration: none;
    color: white;
}
.big_bg{
    background-size: contain;
    background-position: right top;
    background-repeat: no-repeat;
    position: relative;
}
#top{
    background-color:#FF00FF ;
    background-image: url("../img/top.png");
}
#top header{
}
nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    
}
nav ul li{
    position: static;
    list-style: none;
}
nav ul li a{
    margin-right:20px;
    font-size: 5vw;
    color: white;
}
.board{
    background-color: rgba(25,25,112,0.5);
    height: auto;
    width: 37%;
    position: absolute;
    top:30px;
    height: 1080px;

}
.board a img{
    width: 10vw;
    height: auto;
}

追記
回答より、ネガティブマージンを使用してはどうか？とのご意見が有ったため、下記のコードを参考に修正することで、要素を重ねることが出来ました。

.board{
    background-color: rgba(25,25,112,0.5);
 /*   height: auto; 削除 */
    width: 37%;
/*    position: absolute;　削除 */
/*    top:30px;  　削除 */
    height: 1080px;
    margin-top: -40px; /* 追加 */

}

修正

.board{
    background-color: rgba(47, 47, 68, 0.5);
    width: 37%;
    /* position: relative; */
    padding-top: 250px;
    margin-top: -250px;
    max-height: 1080px;
}

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

回答2件

ベストアンサー

position:abusolute を設定するとその要素は通常のフローから外れるので、他の要素からは存在しないものみなされます。そのため、親要素（id="main"）は子要素がない状態になり高さが0になりますので、「メイン画像部分が潰れてしまい」という状態になります。

CSSだけでpositionの使用を無しに要素同士を重ねるのは難しいでしょうか？

ネガティブマージンを使えばどうでしょうか。

css
1.board{
2    background-color: rgba(25,25,112,0.5);
3 /*   height: auto; 削除 */
4    width: 37%;
5/*    position: absolute;　削除 */
6/*    top:30px;  　削除 */
7    height: 1080px;
8    margin-top: -40px; /* 追加 */
9
10}

投稿2020/06/07 07:00

編集2020/06/07 07:01

hatena19

総合スコア34075

natsu_kawa

2020/06/07 07:19

仰る通りネガティブマージンに変えて下記のコードに変更したら上手くいきました！貴重なアドバイスありがとうございました…！ .board{ background-color: rgba(47, 47, 68, 0.5); width: 37%; /* position: relative; */ padding-top: 250px; margin-top: -250px; max-height: 1080px; }

natsu_kawa

2020/06/07 07:27

position：abusolute;はrelativeの直下の子要素でない限り、使用しない方が良いという事ですかね。勉強になりました。

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

absoluteをつけた要素は通常のフローから除外されるので、そうなります。
提示のコードであればabsoluteをつけるのは.main_headerのほうでしょう。

【position - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/position#Values

absolute

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。

投稿2020/06/07 07:02

kei344

総合スコア69606

kei344

2020/06/07 07:05

https://jsfiddle.net/fok9q31e/

natsu_kawa

2020/06/07 07:32

ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

position:relateive abusoluteで配置が崩れる

関連した質問