z-index guide please

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
VEDRAN
 
 
Posts: 6
Joined: Tue Feb 09, 2021 9:54 am

z-index guide please

Post by VEDRAN » Mon May 24, 2021 10:09 am

Hi

Where can I find this z-index step by step and FAQ guide?
Thereis a lot of mentioning aboit this z-index and now I have came to the point where I must change something and I dont know how to change thez-index of something in my page.
I would need a step by step instructions on how use this z-index and what will I get when i make change like this (change a z-order number for something on the page), and what will I get if I change it the other way.

Thanks for your time

User avatar
Pablo
 
Posts: 24242
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: z-index guide please

Post by Pablo » Mon May 24, 2021 10:43 am

By default, the z-index is determined by the order of the objects on the page.
You can change the order of the objects via the arrange tools or object manager (move up, move down etc).

VEDRAN
 
 
Posts: 6
Joined: Tue Feb 09, 2021 9:54 am

Re: z-index guide please

Post by VEDRAN » Sun Jun 13, 2021 7:53 am

Hi
I wasnt here for longer time...
I am making my third website now using this WYSIWYG, and this z-index is starting to go to my nervs now, as I still dont know how to use it.
I tried this option with z-index using object manager and arange tools, but it doesn help.
It doenst do what I want it to do.
The problem is, there is Overlay Menu that at certein point on page, it (overlay menu) goes below or should I say under the content, so you cant see the overlay menu and when it passes that object it appears again and you can click on it again.
I had the same problem with jquary GoUP button extension, but this extension has inside its settings an option where it says: zindex: 1 and I just changed that number to 500, and now it is above all the objects (pictures, text etc. prevoiusly added to the page) on the page. Solved it like that.
But the overlay Menu does not have this option in its settings, and I cant tell him that he needs to be above all other stuff on the page ALL THE TIME when the afix option is on and it scrolls down as you scroll down the page.
Now, your sugestion. If I click the "Move to top" or "Move UP" option, it only moves it left or right in the same layout grid or flex container. Which means, if a user is using a mobile device, that object will be shown on his phone first or second.
So to solve the problem with this overlay menu going under some picture on the page, I had to put the overlay menu in a seperate layout grid, put it all on top of the page, then turn off affix in its settings, go to layout grid options, and set the layout grid position: sticky. Now, teh entire layout grig goes down with the overlay menu in it. As overlay menu is the only object in layout grid, no problem, but looks ridiculus on the page..
Now this is the ONLY way I was able to MAKE this overlay menu to be on top of EVERY object on the page.

Please, give MORE detailed instruction on this z-index.

Tnx

User avatar
Pablo
 
Posts: 24242
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: z-index guide please

Post by Pablo » Sun Jun 13, 2021 9:14 am

If you need further assistance then please share a demo project so I can see what you have done.

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

VEDRAN
 
 
Posts: 6
Joined: Tue Feb 09, 2021 9:54 am

Re: z-index guide please

Post by VEDRAN » Sun Jun 13, 2021 10:13 am

DEMO here with the described problem above.
http://perfect-host.rf.gd/test3/index.html?i=2
So, I just need you to tell me how to tell this overlay menu that he needs to be IN FRONT of everything when I am scroling down.
Where is this z-order?
I know I have two menus, but I want it to be like that. There is a reason for this.

User avatar
Pablo
 
Posts: 24242
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: z-index guide please

Post by Pablo » Sun Jun 13, 2021 10:48 am

I'm sorry, but the link does not work for me.
Did you upload the project file (wbs)?
Can you please upload the wbs file to a public server?

VEDRAN
 
 
Posts: 6
Joined: Tue Feb 09, 2021 9:54 am

Re: z-index guide please

Post by VEDRAN » Sun Jun 13, 2021 11:01 am

OK. I thought I need to upload that page to my hosting so you can see what is going on, on it while it is online.
Here is wbs file on dropbox https://www.dropbox.com/s/368m2acr99hin ... 2.wbs?dl=0
Hope this is what you need

User avatar
Pablo
 
Posts: 24242
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: z-index guide please

Post by Pablo » Sun Jun 13, 2021 11:16 am

The problem is that you are using the menu inside a layout grid in combination with 'affix'.
When you put it inside a layout grid then the z-order of the element cannot be higher then the z-index the parent element (container).
So, an element with 'affix' should not be inside a container.

Here's the updated project to give you an idea how to make it work:
https://www.wysiwygwebbuilder.com/support/Untitled2.zip

VEDRAN
 
 
Posts: 6
Joined: Tue Feb 09, 2021 9:54 am

Re: z-index guide please

Post by VEDRAN » Sun Jun 13, 2021 11:56 am

So, if I understand this correctly, If I want to use the "affix" with this aditional menu, or perhaps it can be main and only menu on the page, "overlay menu" in my case and I want it to be in the top left corner the whole time while i'm scroling down, I have to add first the Overlay many to the page WITHOUT puting it to layout grid or in any other container, just drop it on an empty page in place where I want it to be shown when scrolling down later, and then I add all the other content to the page that will be in the layout grids or some other containers?

Or, if the content of the page is allready there,
add overlay menu somewhere on an empty part of the page, fix it the way you want to look, and then drag that menu to the top layout grid or whatever the top contaner is, center that part of the container to the LEFT, if i want it to be on the left side of the screen the wholee time scroling down, and then go to "Object Manager" right click on "Overlay Menu" in Object Manager and choose "remove from contaner". Close object manager, and recenter the content back of that top container like it was before.
I think I got it now...

TNX A BUNCH!!!

User avatar
Pablo
 
Posts: 24242
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: z-index guide please

Post by Pablo » Sun Jun 13, 2021 12:07 pm

I have to add first the Overlay many to the page WITHOUT puting it to layout grid or in any other container
Correct
However, you can add it whenever you want, just make sure the menu is a direct child elemen of the page.

Note: the order of elements in the Object manager is relative to the element's parent. So, you can only move the element up or down with that context.

Post Reply