https://px-wing.hatenablog.com/entry/2021/02/11/223649

position

※こちらのページが自分は一番分かりやすかった。ありがとうございます。 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>

f:id:PX-WING:20210211220625p:plain

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

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

f:id:PX-WING:20210211221949p:plain

要素を完全固定 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>

f:id:PX-WING:20210211220817p:plain

表示されてから固定 sticky

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

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

f:id:PX-WING:20210211221531p:plain

z-index 奥行き

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

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

f:id:PX-WING:20210211221737p:plain

overflow

要素がコンテナに対して大きすぎるコンテンツを処理する方法を制御するためのユーティリティ。 tailwindcss.com
テキストボックスの中身をスクロールさせる

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

f:id:PX-WING:20210211223535p:plain

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

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

f:id:PX-WING:20210211223622p:plain