FORUM COMMUNITY IDEAS SHOWCASE LEARNING CENTER

Floating groups at the back'


#1

Why can’t floating groups be behind everything? So everything scrolls over them?


#2

Hi @jaos.pcl :slight_smile: One workaround would be to put everything that’s on the page inside of a floating group (set to float: none). Then, use the “send to back” option on the other floating groups, to set it beneath the main page floating group. I think that will give a similar effect!


#3

Thanks for that! :slight_smile:


#4

@fayewatson This doesn’t work if I want to have other groups that actually floats at the front. Am I right? Thanks in advance.


#5

@jaos.pcl It will work :slight_smile: If you have a floating group that is set to float nothing, and you’re not seeing other floating groups which should be in front of it, click on those floating groups and select “Arrange” --> “Bring to Front” (might take a few different Arrange actions to make sure everything is where it needs to be)


#6

You can also have a floating group and then use Javascript to set it’s z-index to 0 so that it’s behind other objects on the page.


#7

Thank you for your replies.

@fayewatson I did that yesterday but when I tried today, it worked! Thank you. :slight_smile:

@sridharan.s Don’t know how to use Javascript and I can’t code. Time to learn that I think. Thanks anyway.


#8

You can find some js code on the forum or with google that’ll do the trick. It’s a simple 1-line script to change the z-index. Nothing complicated about it.


#9

Thanks! I’ll check it out! :slight_smile:


#10

are you able to share a link to view what you all are talking about? I’d like to see what it looks like “live”.

Thanks


#11

#12

What is an example that you would use a floating group in the manner you described?


#13

In my case, I have an image as my page background and a text. When the user scrolls, a group with other content will scroll over the text and the image. Similar to this site:


#14

ahh. very cool! Thanks!


#15

Example: https://meetaway.com/check-in/1525535166026x140219239838515200