Developer

Intros How it works API reference Turbo CSS Fundamentals Utilities Box sizing Display Float Clear Overflow Position Z index Width Min width Max width Height Min height Max height Margin Padding Border Border width Border color Border style Border radius Outline Outline width Outline color Outline style Outline offset Top Right Bottom Left Inset Flex direction Flex grow Flex shrink Flex basis Flex wrap Order Flex Flex box alignment Justify content Align content Align items Align self Table layout Border collapse Background attachment Background clip Background color Background position Background repeat Background size Background pattern Object fit Object position Box shadow Opacity Visibility Color Font family Font size Font smoothing Font style Font weight Letter spacing Line height List style type List style position Tab size Text align Text decoration Text transform Text overflow Vertical align Whitespace Word break Transform Scale Rotate Translate Skew Transform origin Transition Transition property Transition duration Transition timing function Transition delay Appearance Cursor Pointer events Resize User select Fill Stroke color Stroke width Selectors Download Turbo UI

Layout

Box sizing Display Float Clear Overflow Position Z index

Sizing

Width Min width Max width Height Min height Max height

Spacing

Margin Padding

Border

Border Border width Border color Border style Border radius

Outline

Outline Outline width Outline color Outline style Outline offset

Coordinates

Top Right Bottom Left Inset

Flexbox

Flex direction Flex grow Flex shrink Flex basis Flex wrap Order Flex Flex box alignment

Box alignment

Justify content Align content Align items Align self

Table

Table layout Border collapse

Background

Background attachment Background clip Background color Background position Background repeat Background size Background pattern

Object

Object fit Object position

Effects

Box shadow Opacity Visibility

Text

Color Font family Font size Font smoothing Font style Font weight Letter spacing Line height List style type List style position Tab size Text align Text decoration Text transform Text overflow Vertical align Whitespace Word break

Transform

Transform Scale Rotate Translate Skew Transform origin

Transition

Transition Transition property Transition duration Transition timing function Transition delay

Interactivity

Appearance Cursor Pointer events Resize User select

SVG

Fill Stroke color Stroke width

Position

Syntax

Class

Properties

static

position: static;

relative

position: relative;

absolute

position: absolute;

fixed

position: fixed;

sticky

position: sticky;

Scroll the examples to see the differences.

<div class="t1 w-256 p-16 bg-c-white shadow-4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum est ut odio mattis sodales. <div class="t1 inline-block w-16 h-16 bg-c-blue static"></div> Suspendisse massa velit, mattis non blandit a, convallis ac ligula. Mauris ullamcorper, lacus non tempor vestibulum, elit ante varius eros, ac laoreet erat nibh non nisi. Maecenas nec pretium tellus. Suspendisse eu metus egestas, hendrerit nunc euismod, lacinia nibh. Donec sit amet ex vel orci vestibulum rutrum ut in felis. Fusce ornare, augue id faucibus hendrerit, mi nunc dapibus mauris, eget posuere tellus lacus et velit. Nunc mattis sapien vel ornare efficitur. Vestibulum viverra rutrum dolor nec varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eget luctus magna. </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.

Use static positioning.

t1 static

.t1.static { position: static; }

Use relative positioning.

t1 relative

.t1.relative { position: relative; }

Use absolute positioning.

t1 absolute

.t1.absolute { position: absolute; }

Use fixed positioning.

t1 fixed

.t1.fixed { position: fixed; }

Use sticky positioning.

t1 sticky

.t1.sticky { position: sticky; }