Position
Apply display properties of an element
Classes
| Class | Properties |
|---|---|
| .static | position: static; |
| .fixed | position: fixed; |
| .absolute | position: absolute; |
| .relative | position: relative; |
| .sticky | position: sticky; |
| .z-auto | z-index: auto; |
| .z-[1-10] | z-index: [10, 20, 30...80, 90, 100]; |
| .top-0 | top: 0; |
| .top-auto | top: auto; |
| .bottom-0 | bottom: 0; |
| .bottom-auto | bottom: auto; |
| .left-0 | left: 0; |
| .left-auto | left: auto; |
| .right-0 | right: 0; |
| .right-auto | right: auto; |
Positioning
xxxxxxxxxx1
<small>.top-0.left-0</small>2
<div class="relative w-3 h-3 bg-gray-1">3
<div class="absolute top-0 left-0 p-3 bg-gray-3"></div>4
</div>5
<small>.top-0.right-0</small>6
<div class="relative w-3 h-3 bg-gray-1">7
<div class="absolute top-0 right-0 p-3 bg-gray-3"></div>8
</div>9
<small>.bottom-0.left-0</small>10
<div class="relative w-3 h-3 bg-gray-1">11
<div class="absolute bottom-0 left-0 p-3 bg-gray-3"></div>12
</div>13
<small>.bottom-0.right-0</small>14
<div class="relative w-3 h-3 bg-gray-1">15
<div class="absolute bottom-0 right-0 p-3 bg-gray-3"></div>16
</div>.top-0.left-0
.top-0.right-0
.bottom-0.left-0
.bottom-0.right-0