レッスンに戻る

要素の近くにノート(メモ)を表示する

重要性: 5

要素 anchor の 上 ("top"), 右 ("right") または下 ("bottom") のいずれかにある position に応じて elem を配置する関数 positionAt(anchor, position, elem) を作成してください。

それを使って、クラス "note" を持つ要素と、anchor の近くの指定された位置にテキスト html を表示する関数 showNote(anchor, position, html) を作成します。

次のようなノートを表示します:

P.S. ノートはこのタスクでは position:fixed を持たなければなりません。

タスクのためのサンドボックスを開く

このタスクは、座標を正しく計算するだけで済みます。詳細についてはコードを見てください。

注意: offsetHeight や他のプロパティを読むために要素はドキュメント上になければなりません。 隠れた (display:none) またはドキュメント外の要素はサイズがありません。

サンドボックスで解答を開く