mycsslab/src/utilities/positioning.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Positioning Utilities
 * Position, z-index, and coordinate utilities
 */

/* Position */
.my-static { position: static; }
.my-fixed { position: fixed; }
.my-absolute { position: absolute; }
.my-relative { position: relative; }
.my-sticky { position: sticky; }

/* Top */
.my-top-0 { top: 0; }
.my-top-1 { top: 0.25rem; }
.my-top-2 { top: 0.5rem; }
.my-top-3 { top: 0.75rem; }
.my-top-4 { top: 1rem; }
.my-top-5 { top: 1.25rem; }
.my-top-6 { top: 1.5rem; }
.my-top-8 { top: 2rem; }
.my-top-10 { top: 2.5rem; }
.my-top-12 { top: 3rem; }
.my-top-16 { top: 4rem; }
.my-top-20 { top: 5rem; }
.my-top-24 { top: 6rem; }
.my-top-32 { top: 8rem; }
.my-top-40 { top: 10rem; }
.my-top-48 { top: 12rem; }
.my-top-56 { top: 14rem; }
.my-top-64 { top: 16rem; }
.my-top-auto { top: auto; }
.my-top-px { top: 1px; }
.my-top-0\.5 { top: 0.125rem; }
.my-top-1\.5 { top: 0.375rem; }
.my-top-2\.5 { top: 0.625rem; }
.my-top-3\.5 { top: 0.875rem; }

/* Right */
.my-right-0 { right: 0; }
.my-right-1 { right: 0.25rem; }
.my-right-2 { right: 0.5rem; }
.my-right-3 { right: 0.75rem; }
.my-right-4 { right: 1rem; }
.my-right-5 { right: 1.25rem; }
.my-right-6 { right: 1.5rem; }
.my-right-8 { right: 2rem; }
.my-right-10 { right: 2.5rem; }
.my-right-12 { right: 3rem; }
.my-right-16 { right: 4rem; }
.my-right-20 { right: 5rem; }
.my-right-24 { right: 6rem; }
.my-right-32 { right: 8rem; }
.my-right-40 { right: 10rem; }
.my-right-48 { right: 12rem; }
.my-right-56 { right: 14rem; }
.my-right-64 { right: 16rem; }
.my-right-auto { right: auto; }
.my-right-px { right: 1px; }
.my-right-0\.5 { right: 0.125rem; }
.my-right-1\.5 { right: 0.375rem; }
.my-right-2\.5 { right: 0.625rem; }
.my-right-3\.5 { right: 0.875rem; }

/* Bottom */
.my-bottom-0 { bottom: 0; }
.my-bottom-1 { bottom: 0.25rem; }
.my-bottom-2 { bottom: 0.5rem; }
.my-bottom-3 { bottom: 0.75rem; }
.my-bottom-4 { bottom: 1rem; }
.my-bottom-5 { bottom: 1.25rem; }
.my-bottom-6 { bottom: 1.5rem; }
.my-bottom-8 { bottom: 2rem; }
.my-bottom-10 { bottom: 2.5rem; }
.my-bottom-12 { bottom: 3rem; }
.my-bottom-16 { bottom: 4rem; }
.my-bottom-20 { bottom: 5rem; }
.my-bottom-24 { bottom: 6rem; }
.my-bottom-32 { bottom: 8rem; }
.my-bottom-40 { bottom: 10rem; }
.my-bottom-48 { bottom: 12rem; }
.my-bottom-56 { bottom: 14rem; }
.my-bottom-64 { bottom: 16rem; }
.my-bottom-auto { bottom: auto; }
.my-bottom-px { bottom: 1px; }
.my-bottom-0\.5 { bottom: 0.125rem; }
.my-bottom-1\.5 { bottom: 0.375rem; }
.my-bottom-2\.5 { bottom: 0.625rem; }
.my-bottom-3\.5 { bottom: 0.875rem; }

/* Left */
.my-left-0 { left: 0; }
.my-left-1 { left: 0.25rem; }
.my-left-2 { left: 0.5rem; }
.my-left-3 { left: 0.75rem; }
.my-left-4 { left: 1rem; }
.my-left-5 { left: 1.25rem; }
.my-left-6 { left: 1.5rem; }
.my-left-8 { left: 2rem; }
.my-left-10 { left: 2.5rem; }
.my-left-12 { left: 3rem; }
.my-left-16 { left: 4rem; }
.my-left-20 { left: 5rem; }
.my-left-24 { left: 6rem; }
.my-left-32 { left: 8rem; }
.my-left-40 { left: 10rem; }
.my-left-48 { left: 12rem; }
.my-left-56 { left: 14rem; }
.my-left-64 { left: 16rem; }
.my-left-auto { left: auto; }
.my-left-px { left: 1px; }
.my-left-0\.5 { left: 0.125rem; }
.my-left-1\.5 { left: 0.375rem; }
.my-left-2\.5 { left: 0.625rem; }
.my-left-3\.5 { left: 0.875rem; }

/* Z-Index */
.my-z-0 { z-index: 0; }
.my-z-10 { z-index: 10; }
.my-z-20 { z-index: 20; }
.my-z-30 { z-index: 30; }
.my-z-40 { z-index: 40; }
.my-z-50 { z-index: 50; }
.my-z-auto { z-index: auto; }

/* Inset */
.my-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.my-inset-x-0 { left: 0; right: 0; }
.my-inset-y-0 { top: 0; bottom: 0; }
.my-inset-x-auto { left: auto; right: auto; }
.my-inset-y-auto { top: auto; bottom: auto; }

/* Inset X */
.my-inset-x-0 { left: 0; right: 0; }
.my-inset-x-auto { left: auto; right: auto; }

/* Inset Y */
.my-inset-y-0 { top: 0; bottom: 0; }
.my-inset-y-auto { top: auto; bottom: auto; }

/* Start */
.my-start-0 { inset-inline-start: 0; }
.my-start-1 { inset-inline-start: 0.25rem; }
.my-start-2 { inset-inline-start: 0.5rem; }
.my-start-3 { inset-inline-start: 0.75rem; }
.my-start-4 { inset-inline-start: 1rem; }
.my-start-5 { inset-inline-start: 1.25rem; }
.my-start-6 { inset-inline-start: 1.5rem; }
.my-start-8 { inset-inline-start: 2rem; }
.my-start-10 { inset-inline-start: 2.5rem; }
.my-start-12 { inset-inline-start: 3rem; }
.my-start-16 { inset-inline-start: 4rem; }
.my-start-20 { inset-inline-start: 5rem; }
.my-start-24 { inset-inline-start: 6rem; }
.my-start-32 { inset-inline-start: 8rem; }
.my-start-40 { inset-inline-start: 10rem; }
.my-start-48 { inset-inline-start: 12rem; }
.my-start-56 { inset-inline-start: 14rem; }
.my-start-64 { inset-inline-start: 16rem; }
.my-start-auto { inset-inline-start: auto; }
.my-start-px { inset-inline-start: 1px; }

/* End */
.my-end-0 { inset-inline-end: 0; }
.my-end-1 { inset-inline-end: 0.25rem; }
.my-end-2 { inset-inline-end: 0.5rem; }
.my-end-3 { inset-inline-end: 0.75rem; }
.my-end-4 { inset-inline-end: 1rem; }
.my-end-5 { inset-inline-end: 1.25rem; }
.my-end-6 { inset-inline-end: 1.5rem; }
.my-end-8 { inset-inline-end: 2rem; }
.my-end-10 { inset-inline-end: 2.5rem; }
.my-end-12 { inset-inline-end: 3rem; }
.my-end-16 { inset-inline-end: 4rem; }
.my-end-20 { inset-inline-end: 5rem; }
.my-end-24 { inset-inline-end: 6rem; }
.my-end-32 { inset-inline-end: 8rem; }
.my-end-40 { inset-inline-end: 10rem; }
.my-end-48 { inset-inline-end: 12rem; }
.my-end-56 { inset-inline-end: 14rem; }
.my-end-64 { inset-inline-end: 16rem; }
.my-end-auto { inset-inline-end: auto; }
.my-end-px { inset-inline-end: 1px; }