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

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

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

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

Q&A

解決済

2回答

490閲覧

高さが変動することによって包含する親要素の位置が変わってしまう

maguzo

総合スコア57

CSS

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

0グッド

0クリップ

投稿2018/06/23 08:57

編集2018/06/23 09:15

現在製作しているサイトで不思議な現象が起きております。

製作サイト

  1. .container要素なのですがpositionを指定することなく、margin-topで上のブロック要素との関係を決定しております。

  2. 一度NEXTを押して、テキストエリア.editorに移りテキストエリアを1文字づつ程度埋めて改行を繰り返しテキストエリアの高さを入力数に応じて高くします。(min-height:168pxが設定されております。)

  3. 文字を入力して.editorの高さがある程度大きくなり、結果.containerの高さが生じた場合、

スクロールすると.containerの位置が動いてしまいます。具体的には下にスクロールすると.containerが#headerに隠れてしまいます。
NEXTを押す前の画面等ではスクロールしても.containerは必ず定位置に存在しており動きません。

なぜ、
A) このような現象が起きてしまうのでしょうか?
B) また解決法としてはそれぞれのブロックを固定した位置にするのはposition:absoluteと
するのが一般的なのでしょうか。個人的にはpositionを使用すると他の要素の高さ等に影響を
与えてしまうため、使用に消極的です。
C) また、absoluteを使用した場合、中央に.containerを指定する方法はあるのでしょうか?

よろしくお願い申し上げます。

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

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

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

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

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

guest

回答2

0

ベストアンサー

Googleのデベロッパーツール等で検証してみると、不具合の原因が分かりやすいと思います。

下にスクロールすると.containerが#headerに隠れてしまいます。

NEXTを押す前の画面等ではスクロールしても.containerは必ず定位置に存在しており動きません。

これも、そのツールで私のPC環境(W1280×H1024)で見ると、「NEXTを押す前」でも縦にスクロールが出てheader部に.containerの上部が隠れるように動きますが、「s8_chu」さんの回答にあるようにCSSの設定から見ると正常な動作と言えます。


B) また解決法としてはそれぞれのブロックを固定した位置にするのはposition:absoluteと

するのが一般的なのでしょうか。個人的にはpositionを使用すると他の要素の高さ等に影響を
与えてしまうため、使用に消極的です。

要素を固定すると言う事は、その下の要素(position:absoluteに関係なく)がデバイス画面より長くなれば縦スクロールが発生し、固定要素の下に入りこませる表示が目的なので、それが嫌なら固定を解除するしかないと思います。


C) また、absoluteを使用した場合、中央に.containerを指定する方法はあるのでしょうか?

「s8_chu」さんの回答以外ではこういうのもあります。
position: absolute;を中央寄せする方法


固定方法は「position:fixed;」が一般的で使いやすいかと思います。最近は「position:sticky;」を使った方法もあるので、色々試してみてください。

参考:
ヘッダー、フッターの固定にposition:sticky使うとCSSだけで完結するし良いかも。

投稿2018/06/23 23:13

yoshinavi

総合スコア3521

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

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

maguzo

2018/06/24 13:47

yoshinavi様 丁寧なご解説をいただき誠にありがとうございます。 stickyで特定の位置から固定化されるのも悪くなさそうです! また、他の参考サイトについてもぜひ拝見させていただきます。
guest

0

A) このような現象が起きてしまうのでしょうか?

header#headerposition: fixedを指定しているようなので、スクロール可能な場合にheader#headerの内容がdiv.containerの上に来るのは自然なことだと思います。

B) また解決法としてはそれぞれのブロックを固定した位置にするのはposition:absoluteと

するのが一般的なのでしょうか。

私の場合、すべての要素にposition: absoluteを指定して絶対配置するような方法は、面倒なのでしません。
もしも、header要素を最上部に配置したいだけならば、position: fixed以外の方法があると思います。

C) また、absoluteを使用した場合、中央に.containerを指定する方法はあるのでしょうか?

position: absoluteを使用して水平方向に中央寄せする場合、以下のようなコードを追記することで行えると思いますが、上で言ったように面倒なので方法の紹介に止めます。

CSS

1.container { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6}

投稿2018/06/23 11:01

編集2018/06/23 11:04
s8_chu

総合スコア14731

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

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

maguzo

2018/06/23 12:45

コメント誠にありがとうございます。 header要素をfixedにしていることに自分で気づいていなかったです。申し訳ございません。 さて、 >もしも、header要素を最上部に配置したいだけならば、position: fixed以外の方法があると思います。 のコメントについてですが、あまり良い方法が思い浮かびません。。 ヘッダーは固定した今まで、他の要素をスクロールしてもheaderは固定させて、隠さないようにする方法はposition:absoluteを指定する以外あり得るのでしょうか。。。 不案内で申し訳ございませんが、一例でも教えていただければとても助かります。 よろしくお願い申し上げます。
maguzo

2018/06/23 12:49

加えてabsoluteの際の中央寄せについて、ご教示いただき誠にありがとうございます。 大変参考になりました。 よろしくお願い申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問