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

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

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

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

解決済

position: sticky と、フレックスボックスの align-items の関係について

Lhankor_Mhy
Lhankor_Mhy

総合スコア32911

CSS

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

2回答

1リアクション

2クリップ

264閲覧

投稿2022/08/09 10:11

編集2022/08/09 10:18

前提

 フレックスアイテムをスティッキー配置した時に、フレックスコンテナの振る舞いについて、ふたつ質問があります。

 下記コードでは、フレックスアイテムを4つ並べています。ひとつめのmainだけコンテンツを多くし、ふたつ目以降の3つのasideはコンテンツを少なくしています。メインコンテンツとサイドバー*3が横に並んでいるレイアウトを想定しています。

細かい説明

 サイドバーひとつめは静的配置をしています。align-self: endとしているので、当然、フレックスコンテナの下部にくっついています。

css

.static { position: static; bottom: 0; align-self: end; background-color: gold; }

 サイドバーふたつめはスティッキー配置をしています。align-self: endとしていますが、フレックスコンテナの下部に配置されず上部にくっついています。また、bottom: 0としているため、スクロールしていくと、スクロール領域下部に粘着します。

css

.end { position: sticky; bottom: 0; align-self: end; background-color: pink; }

 サイドバーみっつめはスティッキー配置をしています。align-self: centerとしていますが、フレックスコンテナの中央に配置されずフレックスコンテナの上部にくっついています。また、bottom: 0としているのですが、スクロールしていくと、スクロール領域下部に粘着せず、最終的にフレックスコンテナの中央に残ります。

css

.end { position: sticky; bottom: 0; align-self: end; background-color: pink; }

質問

  1. スティッキー配置をすることによって、align-selfの指定とは異なりフレックスコンテナ上部に配置されるのはなぜなんでしょうか?
  2. align-self: centerとした場合、bottom: 0としてもスクロール領域下部に粘着しないのはなぜなんでしょうか?

該当のソースコード

https://jsfiddle.net/Lhankor_Mhy/doa74h3q/

html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> section { display: flex; } :is(main, aside) { flex: 1; } main { background-color: gray; } .static { position: static; bottom: 0; align-self: end; background-color: gold; } .end { position: sticky; bottom: 0; align-self: end; background-color: pink; } .center { position: sticky; bottom: 0; align-self: center; background-color: aqua; } p { margin: 100px 0; border: 1px dotted; } </style> </head> <body> <section> <main> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> <p>11</p> <p>12</p> </main> <aside class="static"> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> </aside> <aside class="end"> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> </aside> <aside class="center"> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> <p>07</p> <p>08</p> <p>09</p> <p>10</p> </aside> </section> </body> </html>

補足情報

 解消方法などをお聞きしているわけではありません。そのような振る舞いになる根拠が知りたいので、よろしくお願いいたします。

 仕様を引用してご教示いただくのが望ましいですが、個人的な見解でも結構です。

arcxor👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS

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