Top / Right / Bottom / Left

Utilities for controlling the placement of positioned elements.

Usage

Use the {top|right|bottom|left}={value} utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent.

Combined with xstyled's padding and margin utilities, you'll probably find that these are all you need to precisely control absolutely positioned elements.

{/* Span top edge */}
<x.div position="relative" h={32} w={32}>
  <x.div top={0} right={0} left={0} h={16}>
    1
  </x.div>
</x.div>
 {/* Span right edge */}
<x.div position="relative" h={32} w={32}>
  <x.div top={0} right={0} bottom={0} w={16}>
    2
  </x.div>
</x.div>
 {/* Span bottom edge */}
<x.div position="relative" h={32} w={32}>
  <x.div right={0} bottom={0} left={0} h={16}>
    3
  </x.div>
</x.div>
 {/* Span left edge */}
<x.div position="relative" h={32} w={32}>
  <x.div top={0} bottom={0} left={0} w={16}>
    4
  </x.div>
</x.div>
 {/* Fill entire parent */}
<x.div position="relative" h={32} w={32}>
  <x.div top={0} right={0} bottom={0} left={0}>
    5
  </x.div>
</x.div>
 {/* Pin to top left corner */}
<x.div position="relative" h={32} w={32}>
  <x.div top={0} left={0} h={16} w={16}>
    6
  </x.div>
</x.div>
 {/* Pin to top right corner */}
<x.div position="relative" h={32} w={32}>
  <x.div top={0} right={0} h={16} w={16}>
    7
  </x.div>
</x.div>
 {/* Pin to bottom right corner */}
<x.div position="relative" h={32} w={32}>
  <x.div right={0} bottom={0} h={16} w={16}>
    8
  </x.div>
</x.div>
 {/* Pin to bottom left corner */}
<x.div position="relative" h={32} w={32}>
  <x.div bottom={0} left={0} h={16} w={16}>
    9
  </x.div>
</x.div>

Responsive

To position an element only at a specific breakpoint, use responsive object notation. For example, adding the property top={{ md: 10 }} to an element would apply the top=10 utility at medium screen sizes and above.

<x.div top={{ md: 10 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Inset scale

If you'd like to customize your values for top, right, bottom, left, all at once, use the theme.inset section of your theme.

  // theme.js
  export const theme = {
    inset: {
+     sm: '8px',
    },
  }

Learn more about customizing the default theme in the theme customization documentation.