もうposition:absoluteな要素の配置に悩まないためのブックマークレット
配置が難しい要素に使うことがあるcssのposition:absolute。直近のposition:static以外をもつ先祖要素からの相対位置を指定して使われます。
画像などに透明なa要素をたくさん配置するとなるとtry&checkで何度もブラウザをチェックするのはアホらしいのでブックマークレットを作りました。
- 上のリンクをブックマークバーにドラッグ＆ドロップ
- これを使いたいページを開いてこのブックマークレットをクリック
- 基準として指定したい親要素を選択
- にゅっと出てきた半透明の赤いブロックをドラッグ＆リサイズしてtop,left,width,heightを表示
- 新しいブロックが欲しくなったらコントローラーの+Add Newボタンをクリックして再度親要素を選択
- コントローラーもドラッグ可能
httpsなサイトにも一応使えます。もし良ければgithubに置いているコードの見直しや改良していただけると嬉しいです。
ShingoFukuyama/my-bookmarklets
Chrome Developer ToolsにもPage Rulerという拡張があったのですが、こちらは位置の基準要素を指定できないようです。