質問するログイン新規登録

質問編集履歴

2

コードを忘れてた

2024/12/24 08:59

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37570

title CHANGED
File without changes
body CHANGED
@@ -14,6 +14,35 @@
14
14
  一方で、fixed の場合は、親要素・兄弟要素ともアンカー要素と認識するようです。
15
15
  ![fixed](https://ddjkaamml8q8x.cloudfront.net/questions/2024-12-24/28c669ec-db81-4a6a-899b-ede8a7c9b225.png)
16
16
 
17
+ ### コード
18
+
19
+ ```html
20
+ <div>
21
+ 001
22
+ <p>
23
+ 0002
24
+ </p>
25
+ </div>
26
+ <p>
27
+ 00003
28
+ </p>
29
+ ```
30
+
31
+ ```css
32
+ div {
33
+ position: relative;
34
+ anchor-name: --test;
35
+ width: 5em
36
+ }
37
+
38
+ p {
39
+ position: fixed;
40
+ position: absolute;
41
+ position-anchor: --test;
42
+ position-area: right;
43
+ }
44
+ ```
45
+
17
46
  サンプル:
18
47
  https://jsfiddle.net/Lhankor_Mhy/u9p74zjk/
19
48
  (devtools で position を切り替えてお試しください)

1

typo修正

2024/12/24 08:56

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37570

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提
2
2
 
3
- CSSアンカーポジショニングの`position-anchor`を設定できる要素は、『位置指定された要素』となっています((MDN)[https://developer.mozilla.org/en-US/docs/Web/CSS/position-anchor#description])。
3
+ CSSアンカーポジショニングの`position-anchor`を設定できる要素は、『位置指定された要素』となっています([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position-anchor#description))。
4
4
 
5
5
  ### 質問
6
6