position
Setting an element is positioned in a document.
Overview
| Class | Declarations |
|---|---|
rel | position: relative;
|
abs | position: absolute;
|
static | position: static;
|
fixed | position: fixed;
|
sticky | position: sticky;
|
position:<type> | position: <type>;
|
Examples
Positioning elements as static
Use static to position an element according to the normal document flow. HTML elements are static by default.
static parentabs child<div class="static p:5x"> <div>static parent</div> <div class="abs bottom:10px left:10px">abs child</div></div>Positioning elements as relative
Use rel to keep an element in the normal document flow while offsetting it relative to itself with top, right, bottom, and left values.
relative parent<div class="rel left:20px top:30px p:5x"> <div>relative parent</div></div>Positioning elements as absolute
Use abs to remove an element from the normal document flow and position it relative to its closest positioned ancestor.
relative parentabs child<div class="rel p:2xl"> <div>relative parent</div> <div class="abs left:0 top:0">abs child</div></div>Positioning elements as fixed
Use fixed to remove an element from the normal document flow and position it relative to the viewport.
aron3:03 a.mFront-end needs a revolution
joy7:38 p.mShilin night market later 🥰 ?
miles5 mins agotask done 🙌🏻
benseage3 hours agoEasy game easy life
lola11 seconds agoLet me write the doc !
<div> <input type="search" class="fixed"> <ul> <li> <div class="rel"> <img src="..."> </div> <div> <div class="flex"> <div>Aron</div> <div>3:03 a.m</div> </div> <p>Front-end needs a revolution</p> </div> </li> ... </ul></div>Positioning elements as sticky
Use sticky to position an element based on scroll position. It behaves like a relatively positioned element until a given offset is reached, then sticks to that offset.
- aron3:03 a.m
Front-end needs a revolution
- joy7:38 p.m
Shilin night market later 🥰 ?
- miles5 mins ago
task done 🙌🏻
- benseage3 hours ago
Easy game easy life
- lola11 seconds ago
Let me write the doc !
<ul class="overflow:auto"> ... <li class="sticky top:0"> <img src="..."> <div>Joy</div> ... </li> ...</ul>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="rel:hover rel@dark rel@print rel@sm">...</div>