Streaming live at 10am (PST)

Stacking elements not working as expected


#1

Hey,
Maybe i'm wrong, but as i understand, the order of elements in the Navigator panel should represent their order on screen (like layers in photoshop).
For some reason, it doesn't work for me:

Notice that the Div with the green arrow is on top of another Div, but in the design it's actually beneath it.
I checked the z-index of all items, and it doesn't seem that the problem is because of that.

I've been pulling all my hair off by now, and didn't get it to work.
What's wrong?


Here is my public share link: LINK


#2

Not quite. if you start reordering elements, you'd better use z-index to define the z order.

I can't reproduce your screenshot, can you help me doing so?


#3

Thanks @vincent.
In fact, just last night i managed to make it work, though i'm not sure what i did... just played with stuff.

Still, in the first place, i checked the z-index of all elements, and i even gave the green DIV the highest value but it didn't matter...
Anyway, all water under the bridge now, cuz i got it to work somehow.
Thank!


#4

There's a way to use z-indexes... Consider z-index values to be used at the same level. If you want some elements to be ordered a certain way, try to give the zindexes properties to elements at the same level. If you want green to be above blue, in the following example, use z-indexes as described:

Say your structure is like this:

div
green div
/div
blue div

then place your indexes like this:

div Z-INDEX 2
green div
/div
blue div Z-INDEX 1

instead of:

div
green div Z-INDEX 2
/div
blue div Z-INDEX 1


#5

That's fine. But it's not better than "I got it to work and I know exactly why" :wink:


#6

You are totally right , but i'm in a learning curve :smile:

And while in the curve, i must say that i didn't quite understand what you meant.
I'd love if you could take a look at what i accomplished on that matter (by chance) and give me your insights: PREVIEW

By the way, in the short time that i'm using webflow, i got a better understanding of this tool: while Webflow addresses people who don't know how to write code, or doesn't want to (judging by their promotional video) one still must know the rules and theory of website structure. And that, they don't mention.
I'm a designer, but i know nothing about code and building websites, and i figured that this platform will be great for me. And it is, but now i understand that although i don't need to know code, i do need to know proper construction methods.


#7

How can I put this simply...

Webflow team built a tool that is incredibly good. You can build somehting simple and great without knowing anything. you can even modify a more complicated thing (template) without web skills.

What users who don't know about web developmentmiss is that Webflow totally respects HTML and CSS. Structure, names, panels... There is no magic in the Style panel, that's why skilled users can help the others. It's rarely a Webflow question, it's HTML and CSS questions. And that is amazing.

So, without skills you can do great, and evidently with skills you can do amazing. On top of all of that, when you develop your HTML and CSS skills, as WF sticks with them, you'll progress. You're not only becoming good at Webflow but at HTML and CSS altogether. Since using Webflow I improved my HTML/CSS skills a lot.

I don't know where to click on your page.


#8

Ahhh... I'm still working on the site and changing things, so maybe it affects what you see?
I thought that the preview link shows you only the state of the website when i created the link, but maybe i'm wrong?
Is it still alive and kicking?


#9

No the link shows the current state of the site.


#10

Bummer...Didn't know that... (Damn learning curve :confused:)
Well, never mind, I did some changes and what was done is done.

I guess that i might run into the same problem in the future... hope you could help me if that happen.

Thank for your help man, much appreciated!


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.