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; }