Position定位（CSS）

2025-05-01 00:27:07首发，2周前更新

position定位的原子化，定义了_pos-*相关CSS变量，满足基本使用场景。

Position定位（CSS）2周前更新 ax.Position定位引擎模块(class类)详细使用方法和诸多示例 需5金币7个月前更新

简单使用

对css中的position属性进行原子化处理，将原本的5个属性改写如下：

_pos-fixed：对应position:fixed
_pos-absolute：对应position:absolute
_pos-relative：对应position:relative
_pos-sticky：对应position:sticky
_pos-static：对应position:static

输出
HTML
JS

定位容器
```
                
                
            
```

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

0定位

提供值为0的四角定位，分别如下：

inset-t-0：对应top=0
inset-b-0：对应bottom=0
inset-s-0：对应left=0（inset-inline-start）
inset-e-0：对应right=0（inset-inline-end）
inset-0：对应top/bottom/left/right=0，实际效果是占满整个容器

输出
HTML
JS

定位容器
```
                
                
            
```

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

快捷角落定位

容器定位最常见的是定位在容器的四个角落，所以提供了以下快捷的角落定位css类：

inset-st：对应left/top=0
inset-sb：对应left/bottom=0
inset-et：对应right/left=0
inset-eb：对应right/bottom=0

输出
HTML
JS

定位容器
```
                
                
            
```

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

复原定位

复原定位的方式有两种，一是设置inset-static或inset-relative；二是将left/top值设为auto，对应的样式类如下：

inset-t-auto：对应top=auto（inset-block-start）
inset-b-auto：对应bottom=auto（inset-block-end）
inset-s-auto：对应left=auto（inset-inline-start）
inset-e-auto：对应right=auto（inset-inline-end）
inset-auto：对应top/bottom/left/right=auto

输出
HTML
JS

定位容器
```
                
                
            
```

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