Chakra-UI

I♥️Components

Position

|

Chakra Docs

|

In Chakra UI, you can control the positioning of a component with respect to its parent or other elements on the page using the position property.

It accepts the same values as the CSS position property: "static", "relative", "absolute", "fixed", and "sticky".

  • Static Positioning: This is the default value. Elements layout in their normal document flow.
  • Relative Positioning: An element with position "relative" is positioned relative to its normal position.
  • Absolute Positioning: An element with position "absolute" is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport).
  • Fixed Positioning: An element with position "fixed" is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
  • Sticky Positioning: An element with position "sticky" is positioned based on the user's scroll position. It toggles between relative and fixed, depending on the scroll position. It's positioned relative until a given offset position is met in the viewport, then it "sticks" in place.

To import this components used below:

Examples

I'm a statically positioned box
I'm a relatively positioned box

Code

In this example, we use React's useState hook to create a showBox state variable and a setShowBox function to update it. When the Button is clicked, the toggleBox function is called, which updates showBox to its opposite value (i.e., if it was true, it becomes false, and vice versa).

The Box component is only rendered if showBox is true, thanks to the

line. This line says "if showBox is true, then render the Box component". When showBox is false, the Box component is not rendered.

This effectively toggles the box's visibility each time the button is clicked. Please note that this box is positioned absolutely relative to the nearest positioned parent. If there are no other elements with a position set, this will be relative to the body.

The button's text is determined by the showBox state. If showBox is true (meaning the box is currently showing), the button text says "Ciao, Box!". If showBox is false (meaning the box is not currently showing), the button text says "Voilà, a box!". The ternary operator (? :) is used here to set the button's text based on the state of showBox

Now, just as with the absolute positioning, example, we have a similar scenario with fixed position. The main difference here is that a fixed position box is positioned relative to the viewport, so it will stay in place even when you scroll the page.

Code

In this example, we have a Box with position="fixed", and it's placed at the bottom right of the screen using bottom="0" andright="0". No matter how you scroll the page, this box will stay at the bottom right of the viewport as long as showBox is true.

Sticky Positioning: An element with position "sticky" is positioned based on the user's scroll position. It toggles between relative and fixed, depending on the scroll position. It's positioned relative until a given offset position is met in the viewport, then it "sticks" in place.

The sticky position can be a bit tricky because it depends on the scroll position of its nearest scrolling ancestor and its top, bottom, left, or right properties. For an element to be sticky, it must be inside a container that has a defined height, and it must have a defined top or bottom value.

Did you know?

Creative Idea No. 1

Centering an Element: you can use absolute positioning to center an element both vertically and horizontally within its parent.
In this example, the child box is positioned absolutely and then moved to the center of its parent using the top, left, and transformproperties.
I'm a box centered within my parent

Code

Creative Idea No. 2

Stacking Elements: you can use relative and absolute positioning to stack elements on top of each other. This can be useful for creating overlays or intricate designs. You can control the stacking order using the zIndex prop.
In this example, two boxes are stacked on top of each other, with the first box appearing above the second due to its higher zIndex.
I'm on top
I am underneath

Code

Creative Idea No. 3

In Chakra UI, for RTL (right to left) support, you can use the start and end values. These values automatically adjust based on the text direction. The start will represent left in a left-to-right language (like English), and right in a right-to-left language (like Arabic). Similarly, end will represent right in a left-to-right language and left in a right-to-left language.
In the following example, if the direction is set to "rtl", the box will appear on the right side of the screen because start represents right in RTL languages. If you change the direction to "ltr", the box will appear on the left side of the screen because start represents left in LTR languages. The box's position automatically adjusts based on the text direction. Please note that this is a very simple example, and in a real-world application, you would probably handle changing the text direction in a more dynamic way, perhaps based on user preferences or the language setting of their browser or operating system.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.