Study Overlay

要素をクリックしてオーバーレイを表示するデモアプリ。

DOM構造（オーバーレイに必要な最低限の構造）

┌─────────────────────────────────────────────────────────────┐
│ div.overflow-y-auto (containerRef)                          │
│ ├─ スクロールコンテナ                                         │
│ ├─ 座標計算の基準点（getBoundingClientRect）                  │
│ │                                                           │
│ │  ┌─────────────────────────────────────────────────────┐  │
│ │  │ div.relative                                        │  │
│ │  │ ├─ position:absolute の基準点                        │  │
│ │  │ │                                                   │  │
│ │  │ │  ┌───────────────────────────────────────────┐   │  │
│ │  │ │  │ コンテンツ（ExampleContents）              │   │  │
│ │  │ │  │ ・クリック対象の要素群                      │   │  │
│ │  │ │  └───────────────────────────────────────────┘   │  │
│ │  │ │                                                   │  │
│ │  │ │  ┌───────────────────────────────────────────┐   │  │
│ │  │ │  │ div.absolute (EditorOverlay)              │   │  │
│ │  │ │  │ ├─ pointer-events: none                   │   │  │
│ │  │ │  │ ├─ top/left/width/height で位置指定        │   │  │
│ │  │ │  │ └─ 選択要素の上に重なる                    │   │  │
│ │  │ │  └───────────────────────────────────────────┘   │  │
│ │  │ │                                                   │  │
│ │  └─────────────────────────────────────────────────────┘  │
│ │                                                           │
└─────────────────────────────────────────────────────────────┘

座標計算

オーバーレイの top = 要素.top - コンテナ.top + コンテナ.scrollTop
オーバーレイの left = 要素.left - コンテナ.left + コンテナ.scrollLeft

• getBoundingClientRect() はビューポート基準の座標を返す
• コンテナ位置を引いて、コンテナ基準に変換
• スクロール位置を加算して、スクロール後も正しい位置を維持