@hzy1123581324/z-view-ui/static/css/common/position.css

z-view-ui是使用vue3开发的组件，开发中,有部分组件功能未实现,慎用

/*固定定位*/
[class^="fixed-"],[class*=" fixed-"],.fixed{
   position: fixed !important;
}
.fixed-top {
  top: 0;
  left: 0;
  right: 0;
  z-index: 20
}

.fixed-rg {
  top: 0;
  right: 0;
  z-index: 20
}

.fixed-btm,.fixed-tabbar,.fixed-btm-safe {
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  max-width: 100%;
  box-shadow: var(--fixed-btm-shadow,unset);
  background-color: var(--fixed-btm-bg-color,inherit);
}
.fixed-btm-safe{
  border-bottom: 0rpx solid transparent;
  border-bottom: constant(safe-area-inset-bottom) solid transparent;
  border-bottom: env(safe-area-inset-bottom) solid transparent;
  background-clip: border-box;
}
.fixed-center{
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 20
}
.fixed-tabbar{
  bottom: var(--fixed--tabbar-bottom,50px);
}

/*绝对定位*/
[class^="absolute-"],[class*=" absolute-"],.absolute{
  position: absolute !important;
}
.absolute{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  inset: 0;
}
.absolute-top {
  top: 0;
  left: 0;
  right: 0;
}

.absolute-btm {
  bottom: 0;
  left: 0;
  right: 0;
}
.absolute-lf {
  top: 0;
  left: 0;
}
.absolute-rg {
  top: 0;
  right: 0;
}
.absolute-rg-center {
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform:translateY(-50%);
  transform: translateY(-50%);
}
.absolute-lf-center {
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform:translateY(-50%);
  transform: translateY(-50%);
}
.absolute-top-center {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform:translateX(-50%);
  transform: translateX(-50%);
}
.absolute-btm-center {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform:translateX(-50%);
  transform: translateX(-50%);
}
.absolute-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.absolute-half {
  top: 50%;
  left: 50%;
}
[class^="sticky-"],[class*=" sticky-"],.sticky{
  position: fixed !important;
  position: sticky !important;
}
.sticky,.sticky-navbar{
  top: 0;
  left: 0;
  right: 0;
}
.sticky-navbar{
  top: calc( var(--status-bar-height, var(--status-height)) + var(--navbar-height,88rpx) );
  background-color: var(--sticky-navbar-bg,inherit);
  z-index: 9;
  /* 填充与navbar 之间的空白间隙 */
  box-shadow:var(--sticky-navbar-shadow,0 -2rpx 0 0 var(--sticky-navbar-bg,#fff)) ;
}
[class^="relative-"],[class*=" relative-"],.relative{
  position: relative !important;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-40{
  z-index: 40;
}

.z-50{
  z-index: 50;
}

.z-60{
  z-index: 60;
}

.z-70{
  z-index: 70;
}

.z-80{
  z-index: 80;
}

.z-90{
  z-index: 90;
}

.z-100{
  z-index: 100;
}

.z-200{
  z-index: 200;
}
.z-999{
  z-index: 999;
}
.z-9999{
  z-index: 9999;
}
.z-9999999{
  z-index: 9999999;
}