Star

The Outsider

<outsider-l layout="position:absolute top:20px right:10%">...</outsider-l>

The outsider is a positioned element, meaning it has been offset from its original position in the document flow.

You can assign it any non-static position (absolute, fixed, sticky, or relative) and define its placement using top, bottom, left, or right.

When to use ?

Use this when you need to position an element with a non-static position, such as absolute, fixed, sticky, or relative.

Attributes

  • position : Sets the component’s position using any CSS-supported value (absolute, fixed, sticky, relative).
  • top : Specifies the top offset value.
  • bottom : Specifies the bottom offset value.
  • left : Specifies the left offset value.
  • right : Specifies the right offset value.

position:absolute

To use absolute positioning, add the relative utility to the desired ancestor.

This makes the outsider’s position (e.g., left: 10px) relative to that ancestor.

position:relative

When you use relative positioning, the left, right, top, and bottom values adjust the element’s position relative to its original place in the flow.

The element stays in the flow, but its “normal” position shifts by the specified amount.

As you can see when you use position:relative, the outsider has the same width than it’s parent. It’s not always what we want.

If you want to change this you can use the w utility to give it a width, you can use any width valid value :

And voilà !

position:sticky

When you use sticky, the outsider is positioned relative to its nearest scrolling ancestor.

It behaves like a normal element until you scroll past a certain point, at which it “sticks” to that position on the screen with the offset you specified (e.g., top, left, etc.) and stays visible as you continue to scroll.

However, it will stop sticking once you reach the end of its parent element.

As you can see when you use position:sticky, the outsider has the same width than it’s parent. (You can tweak this by using the w utility).

Try to scroll to see the sticky behavior.

position:fixed

When you use fixed positioning, the outsider is positioned relative to the viewport (the visible part of the screen).

As you can see when you use position:fixed, the outsider has same width of it’s content.

Its position remains fixed, meaning it doesn’t move even when you scroll the page.