CSS のポジショニングから Tailwind へ

position:absolute → absolute。inset は top/right/bottom/left。独自 z-index は任意値。

位置指定の規則は単純で、position:absolute は absolute、オフセットは各方向のユーティリティになります。つまずくのは sticky や重なりコンテキスト、overflow による切り取りなので、実際のブラウザで確かめてください。

position とオフセット

position:absolute → absolute。top/right/bottom/left はスケール一致なら inset-* や top-*。

z-index

よくある z-index → z-10 / z-50。珍しいブランド値は z-[…]。

sticky と stacking

祖先の sticky + overflow は定番の罠。変換後に stacking context を確認。

試す

コンバーターを開く

.example { display: flex; gap: 1rem; padding: 1rem; }

信頼メモ: 出力は視覚確認を。コンバーターは下書き用ヘルパーです。