Shift position

Overview

The Shift utility allows you to move an element’s position on the screen using the shift trigger while keeping other transform properties unaffected. Unlike directly modifying translateX or translateY, the shift property is applied independently, ensuring compatibility with existing transform values.

Use shift:{up|down|left|right}(distance) to specify the direction, along with a distance value. The element’s position is updated accordingly, without interfering with other transformations like scaling or rotation.

Syntax

• direction: Specifies the direction of movement. Supported values:
  • up: Moves the element upwards.
  • down: Moves the element downwards.
  • left: Moves the element to the left.
  • right: Moves the element to the right.
• distance: Defines the distance to shift the element (e.g., 50%, 10px).

You can combine horizontal and vertical direction like shift:up and shift:right.

Examples

These examples illustrate how to use the shift utility for single and combined direction adjustments.

up

Moves the element upwards by 50%.

down

Moves the element downwards by 50%.

left

Moves the element to the left by 50%.

right

Moves the element to the right by 50%.

Combination

You can combine multiple shift directions to achieve diagonal movement. For example, the following code shifts the element upwards and to the right by 50% in both directions:

Indicator example

In this real-world example, the shift utility is used to position a small green “indicator” element at the top-right corner of a button.

Without shift

In the first version, the indicator is absolutely positioned manually using CSS to achieve its placement. The hover(parent):scale(1.5) trigger makes the indicator grow when the button (its parent) is hovered.

With shift

In the second version, the same result is achieved using the shift utility: