Let's say i have a custom lightning component which have some kind of message embedded. When i add my custom lightning component to a record page and the user is viewing the record page where the custom component is embedded and he is scrolling through the page, i want the message component to be always visible regardless of page scrolling.

I looked at the highlights panel CSS by inspecting chrome but they are using header which in this case it is not a header.


You need to use position fixed and set the other attributes like top, right or left, like below:

<div class="slds-theme_default" style="position:fixed;top:7rem;right:2rem;">
    some help text

You can put this in component and check.

Using fixed position will make the element position itself with respect to window port so even while scrolling it will be in same position.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.