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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1579閲覧

position: absolute使用時の重なりについて

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/09 20:44

ブラウザのサイズが変わった場合に、textの文字が下のcontainerに重ならないようにしたいと思っています。
textはわざとはみ出すようにしています。
今のところcontainerにmarginでの調整しか方法が浮かびませんが、ブラウザのサイズが変わった場合重なってしまいます。
textにmarginを付けても効果ありませんでした。
textの高さが変わってもそれに合わせてcontainer同士の間隔を調整できる方法はないのでしょうか?
よろしくお願いします。

<div class="aa"></div><!-- /.aa -->は見やすくする為だけのものなので無視してください。

html

1コード 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<meta charset="UTF-8"> 6<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<title>Hello World</title> 8<link rel="stylesheet" href="css/style.css"> 9</head> 10<body> 11 <div class="aa"></div><!-- /.aa --> 12 <div class="container"> 13 <div class="content"> 14 <div class="inner"> 15 <div class="blue"> 16 <div class="text"> 17 テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト 18 </div><!-- /.text --> 19 </div><!-- /.blue --> 20 </div><!-- /.inner --> 21 <div class="red"></div><!-- /.red --> 22 </div><!-- /.content --> 23 </div><!-- /.container --> 24 <div class="container"> 25 <div class="content"> 26 <div class="inner"> 27 <div class="green"> 28 <div class="text"> 29 テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト 30 </div><!-- /.text --> 31 </div><!-- /.green --> 32 </div><!-- /.inner --> 33 <div class="yellow"></div><!-- /.yellow --> 34 </div><!-- /.content --> 35 </div> 36</body> 37</html>

css

1コード 2.aa { 3 height: 300px; 4} 5.content { 6 position: relative; 7} 8 9.inner { 10 width: 1100px; 11 margin: 0 auto; 12} 13 14.blue { 15 background-color: blue; 16 height: 100px; 17 position: absolute; 18 top: -50px; 19} 20.red { 21 background-color: red; 22 height: 200px; 23} 24 25.text { 26 width: 90%; 27 28} 29 30.green { 31 background-color: green; 32 height: 100px; 33 position: absolute; 34 top: -50px; 35} 36.yellow { 37 background-color: yellow; 38 height: 200px; 39}

イメージ説明

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

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

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

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

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

guest

回答2

0

ベストアンサー

メディアクエリで細かく調整

投稿2020/05/10 23:25

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

追記しました。文字で縦方向に伸びてしまう要素にposition: absolute;が指定されているのが問題です。
なので
.blue、.greenにposition: relative;を指定し、背景の.redと.yellowにはposition: absolute;を指定するようにしています。

CSS

1.aa { 2 height: 300px; 3} 4.content { 5 position: relative; 6} 7 8.inner { 9 width: 1100px; 10 margin: 0 auto; 11 12 /* 追加 */ 13 max-width: 100%; 14 position: relative; 15 z-index: 1000; 16} 17 18.blue { 19 background-color: blue; 20 min-height: 100px; 21 /* position: absolute; */ 22 position: relative; 23 top: -50px; 24 25 /* 追加 */ 26 z-index: 1000; 27} 28.red { 29 background-color: red; 30 height: 200px; 31 32 /* 追加 */ 33 position: absolute; 34 top: 0; 35 left: 0; 36 width: 100%; 37 height: 100%; 38} 39 40.text { 41 width: 90%; 42} 43 44.green { 45 background-color: green; 46 min-height: 100px; 47 /* position: absolute; */ 48 position: relative; 49 top: -50px; 50 51 /* 追加 */ 52 z-index: 1000; 53} 54.yellow { 55 background-color: yellow; 56 height: 200px; 57 58 /* 追加 */ 59 position: absolute; 60 top: 0; 61 left: 0; 62 width: 100%; 63 height: 100%; 64}

min-heightを使うといかがでしょうか?

CSS

1.blue { 2 background-color: blue; 3 /* height: 100px; */ 4 min-height: 100px; 5 position: absolute; 6 top: -50px; 7} 8.red { 9 background-color: red; 10 /* height: 200px; */ 11 min-height: 200px; 12} 13 14.text { 15 width: 90%; 16} 17 18.green { 19 background-color: green; 20 /* height: 100px; */ 21 min-height: 100px; 22 position: absolute; 23 top: -50px; 24} 25.yellow { 26 background-color: yellow; 27 /* height: 200px; */ 28 min-height: 200px; 29}

投稿2020/05/09 21:46

編集2020/05/10 01:47
new1ro

総合スコア4528

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

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

退会済みユーザー

退会済みユーザー

2020/05/09 22:49

回答ありがとうございます。 min-heightを指定してもやはりブラウザ幅が狭くなると.textが縦に伸びるので重なってしまいます。
new1ro

2020/05/10 01:50

回答追加してみました。根本の問題として、 .textが縦に伸びる ←伸びる要素にposition: absolute;を指定しているのが間違いです。 背景の赤、青、緑、黄の領域については調整お願いします。 おそらく「.inner」の位置がそのままだと難しいと思います。
退会済みユーザー

退会済みユーザー

2020/05/10 23:25

やはりposition: absolute;を使うと仕方ないのですね。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問