もうposition:absoluteな要素の配置に悩まないためのブックマークレット

配置が難しい要素に使うことがあるcssのposition:absolute。直近のposition:static以外をもつ先祖要素からの相対位置を指定して使われます。

画像などに透明なa要素をたくさん配置するとなるとtry&checkで何度もブラウザをチェックするのはアホらしいのでブックマークレットを作りました。

position-absolute-mapping

MapAbsolute

  1. 上のリンクをブックマークバーにドラッグ&ドロップ
  2. これを使いたいページを開いてこのブックマークレットをクリック
  3. 基準として指定したい親要素を選択
  4. にゅっと出てきた半透明の赤いブロックをドラッグ&リサイズしてtop,left,width,heightを表示
  5. 新しいブロックが欲しくなったらコントローラーの+Add Newボタンをクリックして再度親要素を選択
  6. コントローラーもドラッグ可能

httpsなサイトにも一応使えます。もし良ければgithubに置いているコードの見直しや改良していただけると嬉しいです。
ShingoFukuyama/my-bookmarklets

Chrome Developer ToolsにもPage Rulerという拡張があったのですが、こちらは位置の基準要素を指定できないようです。