CSS - Sticky Off-Page Items

[Acorn]

In https://www.talkgraphics.com/showthr...on-the-outside, I pointed out a way of making elements that were Sticky and off the design page not to stick to the right edge of the browser , regardless of the browser width.

In CSS - Sticky Offsets.xar, I have simplified it to two specific user stories - off to the almost left and off to the almost right.
The diagonal Red line has a link to an Anchor, foot, placed at the page bottom to allow simple testing.

The top and bottom options are met in Xara already by:

Top - setting the element to be Sticky and moving it down from the top of the design page (trivial).
Bottom - setting the element to be Sticky and moving it up from the bottom of the design page (uses Autofit to Page > Bottom).

The elements are on the design page.

L&R are different as they are off-page and the Xara off-page capability only sticks them to the browser edge.
To offset:

Left - give the element(s) a ClassName of 'upLeft' - Name > hrtmlclass="upLeft"
Right - give the element(s) a ClassName of 'upRight' - Name > hrtmlclass="upRight"

Include CSS in Website Head:

<style>

.xr_stickie:has( .upRight ) {

right: 20px !important;

}

.xr_stickie:has( .upLeft ) {

left: 20px !important;

}

</style>

If you want a different indent, alter the gap sizes shown in Red above.

Acorn

[Egg Bramhill]

Sweet solution Acorn.

[Egg Bramhill]

If you want a different indent, alter the gap sizes shown in Red above.

altering this doesn't seem to have any effect Acorn?

[Acorn]

altering this doesn't seem to have any effect Acorn?

Egg, :has() needs to be enabled in FFv120. At v121 onwards, it is supported.

Acorn