It accepts the same values as the CSS position property: "static", "relative", "absolute", "fixed", and "sticky".
To import this components used below:
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.
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
Creative Idea No. 2
Creative Idea No. 3