回答編集履歴

2

誤字

2020/05/13 03:23

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 必ずしもそうしないといけないではありません。たとえば:
5
+ 必ずしもそうしないといけないわけではありません。たとえば:
6
6
 
7
7
  [サンプル](https://jsfiddle.net/Lhankor_Mhy/gdeky52w/)
8
8
 

1

補足

2020/05/13 03:23

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -8,8 +8,40 @@
8
8
 
9
9
 
10
10
 
11
- `position: fixed`かつ`width: auto`の要素がどのように幅が決まるのか、については、仕様があります。以下の表をご参照ください。
11
+ ---
12
12
 
13
13
 
14
14
 
15
+ `position: fixed`かつ`width: auto`の要素がどのように幅が決まるのか、については、仕様があります。以下の表をご参照ください。
16
+
15
17
  [CSS Positioned Layout Module Level 3](https://www.w3.org/TR/css-position-3/#abspos-auto)
18
+
19
+
20
+
21
+ ご提示のコードは、`left` `right` `width`が`auto`なので、表の1行目に当たります。
22
+
23
+
24
+
25
+ > auto margins → zero
26
+
27
+ > left → static pos
28
+
29
+ > width → shrink-to-fit
30
+
31
+ > right → solve
32
+
33
+
34
+
35
+ と書いてありますから、`left`は静的配置と同様に左寄せ、`width`はコンテンツ幅に縮小、`right`は最後に包含ブロックに合わせて計算されます。
36
+
37
+ 私が書いたサンプルは、`left` `right` を指定したため、`width`は`solve for auto`となり、包含ブロックに合わせて広がりました。
38
+
39
+
40
+
41
+ なお、`position: fixed`の場合、包含ブロックはスクリーンになると思って、概ね問題ありません。
42
+
43
+ 詳細については、以下をご参照ください。
44
+
45
+ [レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block)
46
+
47
+ [固定位置指定 | position - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position#Fixed_positioning)