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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1345閲覧

position:relateive abusoluteで配置が崩れる

natsu_kawa

総合スコア15

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/06/07 03:01

編集2020/06/07 07:29

リキッドデザインの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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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の直下の子要素でない限り、使用しない方が良いという事ですかね。 勉強になりました。
guest

0

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

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

absolute

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

投稿2020/06/07 07:02

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

natsu_kawa

2020/06/07 07:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問