tailwindcssのposition / z-index / overflow について

position

(参考ページ) tailwindcss.com

※こちらのページが自分は一番分かりやすかった。ありがとうございます。 saruwakakun.com

親がrelative 子がabsolute

    <div class="mt-96 relative w-96 h-60 bg-blue-200">
        <div class="absolute w-40 h-40 top-8 left-8 bg-red-300"></div>
        <div class="absolute w-40 h-40 top-16 left-16 bg-green-300"></div>
    </div>

• 画像の上にテキストを重ねる

    <div class="mt-16 relative">
        <img src="image1.jpg" class="w-96 absolute">
        <span  class="text-white absolute top-16 left-16">テスト</span>    
    </div>

要素を完全固定 fixed

• 画面右下によくある戻るボタンのようなイメージ

    <div class="fixed bottom-8 right-8 rounded-full w-24 py-9 bg-green-300 text-white text-center ring-4 ring-offset-4 ring-offset-blue">
        TOPへ戻る   
    </div>

表示されてから固定 sticky

• 表示されるまでは指定の位置にいて、スクロールで画面上部まで来た場合、画面上部で固定される

    <div class="sticky top-0 p-2 bg-blue-300">stickyヘッダー</div>

z-index 奥行き

(参考ページ) https://tailwindcss.com/docs/z-index

• z-0 〜 z-50(10ずつ、数字が大きな程手前),z-auto
• 先ほど作成したpositionがz-indexを指定したことにより表示順が変わった。

overflow

• 要素がコンテナに対して大きすぎるコンテンツを処理する方法を制御するためのユーティリティ。 tailwindcss.com

• テキストボックスの中身をスクロールさせる

<div class="w-40 h-40 border-2 p-4 m-4 overflow-scroll">
テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
</div>

• 画像に丸みを作るときに使う

    <div class="w-40 rounded-full overflow-hidden">
        <img src="image1.jpg">
    </div>