Advanced Positioning
Master precise element positioning with advanced layout controls, alignment tools, and professional spacing techniques in QUORRA's divine workspace.
What You'll Learn
Understanding Position Types
Relative Positioning
The default positioning mode in QUORRA. Elements flow naturally in the document and can be nudged from their normal position.
- • Content that flows with the page layout
- • Small adjustments to natural positioning
- • Elements that need to maintain document flow
Absolute Positioning
Removes elements from document flow and positions them relative to the nearest positioned parent or the canvas.
- • Overlays and modals
- • Floating elements like badges
- • Precise positioning requirements
Fixed Positioning
Positions elements relative to the viewport. They stay in place when scrolling.
- • Navigation headers
- • Floating action buttons
- • Sticky sidebars
Precision Alignment Tools
Horizontal Alignment
- • Left: Align to left edge
- • Center: Perfect horizontal centering
- • Right: Align to right edge
- • Distribute: Equal spacing between elements
Vertical Alignment
- • Top: Align to top edge
- • Middle: Perfect vertical centering
- • Bottom: Align to bottom edge
- • Baseline: Align text baselines
Layer Depth & Z-Index
Understanding Layer Order
Control which elements appear in front of others using QUORRA's intuitive layer system.
Pro Tip: Layer Hierarchy
Think of layers like sheets of paper. The top sheet (highest z-index) covers everything below it. Use the Layer Panel to visualize and manage this hierarchy.
Positioning Shortcuts
Movement Shortcuts
Alignment Shortcuts
Best Practices
✅ Do This
- • Use relative positioning for most content elements
- • Reserve absolute positioning for special cases
- • Test positioning across different screen sizes
- • Use alignment tools for consistent spacing
❌ Avoid This
- • Overusing absolute positioning
- • Manually typing pixel values for responsive design
- • Ignoring z-index hierarchy
- • Positioning elements outside the viewport
Master Advanced Positioning
Ready to explore more advanced techniques? Learn about layer management and responsive design strategies.