Invision UI v.19.6.0-0

Getting Started

  • Running Invision UI
  • UI Component Anatomy
  • Authoring SCSS
  • Authoring Presentational Behavior

Component Foundations

  • SCSS Authoring
    • Mixins & Variables
    • Stateful Classes
  • State Guidance
    • Empty/Zero State
    • Loading State
  • Utilities
    • Align
    • Display
    • Flexbox
    • Font Size
    • Layout
    • Offset
    • Position
    • Overflow
    • Size
    • Spacing
    • Text
  • Layout
    • Arrange [Deprectated]
    • Divided Columns
    • Embed Video
    • Full and Center
    • Fill [Deprectated]
    • Grid
    • Media Blocks
    • Panels
    • Vertical Layouts
  • Media Queries
  • Angular Behaviors
    • App Theme Directive
    • Auto Focus Input
    • Filters
    • Popup (modal dialog) Manager
    • Tether (tooltip/dropdown) Manager
    • Resize Sensor
    • Watchers

UI Component Library

  • Content & Containment
    • Active Translation
    • Auto Fit Text
    • Address
    • Basic & Input Table
    • Brand Logo/Slogan
    • Call to Action - Empty State
    • Carousel
    • Cart
    • Choice
    • Collapsible Container
    • Copyright Footer
    • Coupon Redeemer
    • Content
    • Date Relative Display
    • Definition Lists
    • Delimited List
    • Details
    • Expiration Date Display
    • Feature Toggle
    • Form Section Heading
    • Header
    • Heading
    • Heading With Annotation
    • Icons
    • Interaction Details
    • Labeled Balance
    • Link
    • Main Container
    • Metadata Card
    • Metadata List Item
    • Offering QuickView
    • Payment Instrument
    • Preference Dialog
    • Pricing Plan Decoration
    • Product Availability
    • Product Details
    • Product Image
    • Quick Info Panel
    • Remark
    • Renewal Column
    • Richlist Filterbar
    • Richlist Wrapper
    • Scrollable Horizontal List
    • Search Card
    • Search Panel
    • Section
    • Selectable Option
    • Smart Truncate
    • Status Grid
    • Tooltip
  • Data Visualizations
    • Bill Runs
    • Comparison Table
    • Datatable
    • Progress Tracker
    • Schedules
    • Query Builder
  • Dialogs
    • Confirmation Dialog
    • Dialog
    • Rich List Dialog
    • Wait Dialog
  • Forms and Filters
    • Additional Properties
    • Autocomplete
    • 3 Field Date Input
    • Checkbox
    • Credit Card
    • Bulk Action Bar
    • Buttons
    • Confirmation Button
    • Date Picker
    • E-Check
    • Entity Specification
    • External Bill
    • External Gift Card
    • Focus Group
    • Forms
    • Filter Bar
    • Filter Dropdowns
    • Gift Card
    • Grouped Check Filters
    • Inputs
    • Input Select Combo
    • Monetary Input
    • Multi Dropdown Selector
    • Multiple Numeric Input
    • Monetary Range Input
    • Password Unmask Button
    • Select
    • Select Button Or Stepper
    • Select Or Text Input
    • Stepper
    • Tag Dropdown
  • Navigation & Flow
    • Back Banner
    • Back Component
    • Breadcrumbs
    • Details Pager
    • Expandable Section
    • Infinite Scroll
    • Open New Window
    • Pager
    • Fancy Richlist
    • Standard Navigator
    • Status Indicator
    • Step Progress Bar
    • Step Progress Indicator
    • Tab Card
    • Tab Panel
    • Tier Navigator
    • Wizard
  • Notifications
    • Loading Indicator
    • Toast Notifications
  • Deprecated
    • Content Area

Showcase

  • General
    • Simplelist
    • Richlist
    • Primary (side) Navigator
  • Customer Care
    • Case Activity List
    • Customer Care Navigator Component
    • Dashboard
    • Decisions
  • Reporting
    • Content Visualization

Unit Testing

  • Actions
  • Components
  • Selectors
  • Reducers

End-to-end Testing

Statistics

Position

In this section

Variants
  • Position Utilities
  • Position Utilities - Absolute & Relative
  • Position Utilities - Fixed
  • Position Utilities - Static
  • Position Utilities - Absolute with Top/Left/Bottom/Right

Position Utilities

Utilities for position.

HTML
<style>
  .Test-area {
    border: 1px solid black;
    height: 200px;
    width: 200px;
  }
  .Test-box {
    display: inline-block;
    height: 20px;
    width: 20px;
  }
  .Test-highlight {
    background: blue;
  }
  .Test-fixed {
    top: 200px;
    right: 200px;
  }
</style>

Position Utilities - Absolute & Relative

Positioning elements using absolute and relative positioning.

HTML
<div class="Test-area u-posRelative" id="center">
  <span class="u-posAbsoluteCenter Test-highlight"></span>
</div>
<div class="Test-area u-posRelative" id="center">
  <span class="u-posAbsoluteCenter Test-highlight Test-box"></span>
</div>

Position Utilities - Fixed

Elements can be fixed to the viewport. Fixed elements are promoted to a new layer for performance.

HTML
<span class="u-posFixed Test-highlight Test-box Test-fixed"></span>

Position Utilities - Static

Elements can be formally set to static.

HTML
<span class="u-posStatic Test-highlight Test-box"></span>

Position Utilities - Absolute with Top/Left/Bottom/Right

Elements can be explicitly positioned with top/left/bottom/right for fixed or absolute positioning.

HTML
<div class="Test-area u-posRelative" id="center">
  <span class="u-posAbsolute u-posTop u-posLeft Test-highlight Test-box"></span>
  <span class="u-posAbsolute u-posBottom u-posRight Test-highlight Test-box"></span>
  <span class="u-posFixed u-posBottom u-posRight Test-highlight Test-box"></span>
</div>