liser/src/modules/position.css

functional css help to optimizing design work and building responsive websites

.static {
  position: static;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}

@media screen and (min-width: 30em) {
  .static-ns {
    position: static;
  }
  .relative-ns {
    position: relative;
  }
  .absolute-ns {
    position: absolute;
  }
  .fixed-ns {
    position: fixed;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .static-m {
    position: static;
  }
  .relative-m {
    position: relative;
  }
  .absolute-m {
    position: absolute;
  }
  .fixed-m {
    position: fixed;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .static-ml {
    position: static;
  }
  .relative-ml {
    position: relative;
  }
  .absolute-ml {
    position: absolute;
  }
  .fixed-ml {
    position: fixed;
  }
}

@media screen and (min-width: 60em) {
  .static-l {
    position: static;
  }
  .relative-l {
    position: relative;
  }
  .absolute-l {
    position: absolute;
  }
  .fixed-l {
    position: fixed;
  }
}