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

前提

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

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

細かい説明

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

css
1		.static {
2			position: static;
3			bottom: 0;
4			align-self: end;
5			background-color: gold;
6		}

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

css
1		.end {
2			position: sticky;
3			bottom: 0;
4			align-self: end;
5			background-color: pink;
6		}

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

css
1		.end {
2			position: sticky;
3			bottom: 0;
4			align-self: end;
5			background-color: pink;
6		}

質問

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

該当のソースコード

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

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5	<meta charset="UTF-8">
6	<meta http-equiv="X-UA-Compatible" content="IE=edge">
7	<meta name="viewport" content="width=device-width, initial-scale=1.0">
8	<title>Document</title>
9	<style>
10		section {
11			display: flex;
12		}
13
14		:is(main, aside) {
15			flex: 1;
16		}
17
18		main {
19			background-color: gray;
20		}
21
22		.static {
23			position: static;
24			bottom: 0;
25			align-self: end;
26			background-color: gold;
27		}
28
29		.end {
30			position: sticky;
31			bottom: 0;
32			align-self: end;
33			background-color: pink;
34		}
35
36		.center {
37			position: sticky;
38			bottom: 0;
39			align-self: center;
40			background-color: aqua;
41		}
42
43		p {
44			margin: 100px 0;
45			border: 1px dotted;
46		}
47	</style>
48</head>
49
50<body>
51	<section>
52		<main>
53			<p>01</p>
54			<p>02</p>
55			<p>03</p>
56			<p>04</p>
57			<p>05</p>
58			<p>06</p>
59			<p>07</p>
60			<p>08</p>
61			<p>09</p>
62			<p>10</p>
63			<p>11</p>
64			<p>12</p>
65		</main>
66		<aside class="static">
67			<p>01</p>
68			<p>02</p>
69			<p>03</p>
70			<p>04</p>
71			<p>05</p>
72			<p>06</p>
73			<p>07</p>
74			<p>08</p>
75			<p>09</p>
76			<p>10</p>
77		</aside>
78		<aside class="end">
79			<p>01</p>
80			<p>02</p>
81			<p>03</p>
82			<p>04</p>
83			<p>05</p>
84			<p>06</p>
85			<p>07</p>
86			<p>08</p>
87			<p>09</p>
88			<p>10</p>
89		</aside>
90		<aside class="center">
91			<p>01</p>
92			<p>02</p>
93			<p>03</p>
94			<p>04</p>
95			<p>05</p>
96			<p>06</p>
97			<p>07</p>
98			<p>08</p>
99			<p>09</p>
100			<p>10</p>
101		</aside>
102	</section>
103</body>
104
105</html>

補足情報

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

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

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

回答2件

ベストアンサー

スティッキー配置をすることによって、align-selfの指定とは異なりフレックスコンテナ上部に配置されるのはなぜなんでしょうか？

stickyとbottom: 0の効果により、要素が本来の位置（staticの場合の位置）よりも上部をスクロール表示しているときは、要素が「ウィンドウ下部に固定される。ただし親要素の上部を突き抜けない」ように配置されるということかと思います。

hatena19さんの言う「上に押し上げられている」状態ということですね。

align-self: centerとした場合、bottom: 0としてもスクロール領域下部に粘着しないのはなぜなんでしょうか？

同様に、stickyとbottom: 0の効果により、要素が本来の位置（staticの場合の位置）よりも上部をスクロール表示しているときは、要素が「ウィンドウ下部に固定される」わけですが、一方で本来の位置より下部にスクロールした場合はstickyとbottom: 0の効果が終わりますね。

stickyかつtop: 0の場合に、その要素よりも上部をスクロールしているときと同じ状態ということです（要素はまだ現れていないので、本来の位置に表示されたままになりウィンドウ上部に固定しない）。

align-self: centerで配置されるはずの本来の位置より下部にスクロールした場合は、sticky と bottom: 0の効果は発動しないということです。上部をスクロールしている間は効果が発動してウィンドウ下部に固定しています。

投稿2022/08/09 16:26

arcxor

総合スコア2859

Lhankor_Mhy

2022/08/10 00:59

ありがとうございます。 > stickyかつtop: 0の場合に、その要素よりも上部をスクロールしているときと同じ状態ということですこちら、大変わかりやすかったです。top の時と同様に考えていましたが、bottom なので方向が逆になるということなのですね。仕様も読んでいたのですが、内容がとてもややこしくてしっかり理解ができていませんでした。

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

スティッキー配置をすることによって、align-selfの指定とは異なりフレックスコンテナ上部に配置されるのはなぜなんでしょうか？

botom: 0 で画面の下辺に粘着しようとするが、要素の高さが画面の高さより大きいため、上に押し上げられているということだと思います。スクロールすることで、要素の下辺が画面内にきたら画面下辺に粘着するのだと思います。
試しに、要素の高さを画面より小さくすると(←中身のp要素を減らして)、画面下辺に粘着するようになります。

align-self: centerとした場合、bottom: 0としてもスクロール領域下部に粘着しないのはなぜなんでしょうか？

スティッキーに関してMDNのドキュメントに下記の記述があります。

position - CSS: カスケーディングスタイルシート | MDN
sticky
要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置されます。

まず「要素は文書の通常のフローに従って配置され」ます。align-self: center; が設定されているので余白が上下に等分に分配されます。この余白を保ったままbottom: 0で下辺に粘着しようとしますが、要素の高さが画面の高さより大きいため、上に押し上げられます。bottom: 0は要素の下の余白を含めて画面の下辺に粘着ということなので、スクロールすると要素の下の余白が現れます。

投稿2022/08/09 13:01