Home›Docs›Basic›CSS Position

CSS Position

Last updated: 17 days ago

Category: Basic

Atomic positioning for 'position', providing basic positioning types and directions.

Basic Usage

Atomic classes for CSS position properties:

Class Name	CSS Property	Description
`_pos-fixed`	`position: fixed`	Positions element relative to viewport
`_pos-absolute`	`position: absolute`	Positions element relative to nearest positioned ancestor
`_pos-relative`	`position: relative`	Positions element relative to its normal position
`_pos-sticky`	`position: sticky`	Hybrid of relative and fixed positioning
`_pos-static`	`position: static`	Default positioning (not positioned)

Output
HTML
JS

Box Content
```
                
                
            
```

                
                let demo0001 = document.querySelector('#demo0001');
                demo0001btn01.onclick=()=>{
                    demo0001.setAttribute('class', '_container _bg-prim _c-white  _p _r-2 _pos-fixed');
                }
                demo0001btn02.onclick=()=>{
                    demo0001.setAttribute('class', '_container _bg-prim _c-white  _p _r-2 _pos-absolute');
                }
                demo0001btn03.onclick=()=>{
                    demo0001.setAttribute('class', '_container _bg-prim _c-white  _p _r-2 _pos-relative');
                }
                demo0001btn04.onclick=()=>{
                    demo0001.setAttribute('class', '_container _bg-prim _c-white  _p _r-2 _pos-sticky');
                }
                demo0001btn05.onclick=()=>{
                    demo0001.setAttribute('class', '_container _bg-prim _c-white  _p _r-2 _pos-static');
                }

Zero Positioning

Provides zero-value positioning for all four edges:

Class Name	CSS Property	Description
`pos-t-0`	`top: 0`	Positions element at top edge of container
`pos-b-0`	`bottom: 0`	Positions element at bottom edge of container
`pos-s-0`	`left: 0` (`pos-inline-start: 0`)	Positions element at start edge (LTR=left)
`pos-e-0`	`right: 0` (`pos-inline-end: 0`)	Positions element at end edge (LTR=right)
`pos-0`	`top/bottom/left/right: 0`	Fills entire container (full coverage)

Output
HTML
JS

Box Content
```
                
                
            
```

                
                let demo0002 = document.querySelector('#demo0002');
                demo0002btn01.onclick=()=>{
                    demo0002.setAttribute('class', ' _bg-prim _c-white  _p _r-2 _pos-absolute _pos-t-0');
                }
                demo0002btn02.onclick=()=>{
                    demo0002.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-absolute _pos-b-0');
                }
                demo0002btn03.onclick=()=>{
                   demo0002.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-absolute _pos-s-0');
                }
                demo0002btn04.onclick=()=>{
                    demo0002.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-absolute _pos-e-0');
                }
                demo0002btn05.onclick=()=>{
                    demo0002.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-absolute _pos-0');
                }
                demo0002.onclick = ()=>{
                    demo0002.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-relative');
                }

Quick Corner Positioning

For common container corner positioning cases, these shortcut classes are provided:

Class Name	CSS Properties	Position	Description
`pos-st`	`left: 0; top: 0`	Start-Top	Top-left corner (LTR contexts)
`pos-sb`	`left: 0; bottom: 0`	Start-Bottom	Bottom-left corner (LTR)
`pos-et`	`right: 0; top: 0`	End-Top	Top-right corner (LTR)
`pos-eb`	`right: 0; bottom: 0`	End-Bottom	Bottom-right corner (LTR)

Output
HTML
JS

Box Content
```
                
                
            
```

                
                let demo0003 = document.querySelector('#demo0003');
                demo0003btn01.onclick=()=>{
                    demo0003.setAttribute('class', ' _bg-prim _c-white  _p _r-2 _pos-absolute _pos-st');
                }
                demo0003btn02.onclick=()=>{
                    demo0003.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-absolute _pos-sb');
                }
                demo0003btn03.onclick=()=>{
                   demo0003.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-absolute _pos-et');
                }
                demo0003btn04.onclick=()=>{
                    demo0003.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-absolute _pos-eb');
                }
                demo0003.onclick = ()=>{
                    demo0003.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-relative');
                }

Reset Positioning

There are two ways to reset positioning:

Using pos-static or pos-relative
Setting left/top values to auto with these utility classes:

Class	CSS Property	Logical Property	Description
`pos-t-auto`	`top: auto`	`inset-block-start: auto`	Resets top positioning
`pos-b-auto`	`bottom: auto`	`inset-block-end: auto`	Resets bottom positioning
`pos-s-auto`	`left: auto`	`inset-inline-start: auto`	Resets left/start positioning (LTR)
`pos-e-auto`	`right: auto`	`inset-inline-end: auto`	Resets right/end positioning (LTR)
`pos-auto`	`top/bottom/left/right: auto`	-	Fully resets all positioning

Output
HTML
JS

Box Content
```
                
                
            
```

                
                let demo0004 = document.querySelector('#demo0004');
                demo0004btn01.onclick=()=>{
                    demo0004.setAttribute('class', ' _bg-prim _c-white  _p _r-2 _pos-absolute _pos-st');
                }
                demo0004btn02.onclick=()=>{
                    demo0004.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-absolute _pos-auto');
                }
                demo0004.onclick = ()=>{
                    demo0004.setAttribute('class', '_bg-prim _c-white  _p _r-2 _pos-relative');
                }

Margin & Padding

17 days ago

Grid Layout