Skip to main content

Positioning and Styling

Overview​

Maestro overlays provide flexible positioning and styling options to ensure they integrate seamlessly with your application's design. This guide covers positioning strategies, styling considerations, and responsive design patterns.

Positioning System​

Overlays use a pixel-based positioning system that allows precise control over placement within the viewport. All position values must be specified in pixels.

Position Interface​

interface IOverlayPosition {
  top?: number;    // Pixels from top edge
  left?: number;   // Pixels from left edge  
  right?: number;  // Pixels from right edge
  bottom?: number; // Pixels from bottom edge
}

Note: All position values must be specified in pixels. Percentage values, CSS calc(), or other CSS units are not supported.

Positioning Examples​

Corner Positioning​

// Top-right corner
const topRight: IOverlayPosition = { 
  top: 20, 
  right: 20 
};

// Top-left corner
const topLeft: IOverlayPosition = { 
  top: 20, 
  left: 20 
};

// Bottom-right corner
const bottomRight: IOverlayPosition = { 
  bottom: 20, 
  right: 20 
};

// Bottom-left corner
const bottomLeft: IOverlayPosition = { 
  bottom: 20, 
  left: 20 
};

Calculated Positioning​

// Calculate center position manually using pixel values
function getCenterPosition(overlaySize: IOverlaySize): IOverlayPosition {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  
  return {
    top: Math.round((viewportHeight - overlaySize.height) / 2),
    left: Math.round((viewportWidth - overlaySize.width) / 2)
  };
}

// Horizontally centered at top
function getTopCenterPosition(overlaySize: IOverlaySize): IOverlayPosition {
  const viewportWidth = window.innerWidth;
  return {
    top: 20,
    left: Math.round((viewportWidth - overlaySize.width) / 2)
  };
}

Offset Positioning​

// Multiple offsets for precise placement
const customPosition: IOverlayPosition = { 
  top: 100, 
  right: 50, 
  bottom: 100 // Creates constraints
};

Size Configuration​

Size Interface​

interface IOverlaySize {
  width: number;
  height: number;
}

This positioning system ensures your overlays are displayed consistently and effectively across all devices and screen sizes while maintaining excellent user experience.

Last updated on