Jump to content

How do I put a DIV in front of the top and bottom Divs via z-index?


simona6
 Share

Recommended Posts

I am creating a page with rows.  Each row is a Step in a process.

In the second, third and so on rows, above its title I have added am element with a 'down arrow'.

I want that Element to be 'in front of' both DIVs.  When I do it now, and set a minus top margin, it goes up, but behind the row above.  How do I make it go in front of it?

I've done it with SVGs so it's making it have that layered look, but doesn't seem to work on DIVs only.

I assumed z-index: 20000; would do the trick, and even if I set the row above to be a lower z-index. 

Help...

Screenshot 2021-06-24 at 09.40.24.png

Edited by simona6
Link to comment
Share on other sites

Alas not, as this is purely in a preview...   
It's in WordPress using WP Bakery.  One row after the other.  Each row has three columns - tho only the center one is being used (others are to create gaps).

Above the 'element' for the Heading, is the Info box to add the icon.  All rows are relative positioned.  Even if I set the icon DIV to be absolute, and high z-index, it still goes under the previous DIV.

 

Link to comment
Share on other sites

Also an oddity... it has a sticky menu.  If I set it just to be margin-top: -100px, it appears to crop the top as it goes behind the previous DIV.  But when you scroll the screen it goes over the sticky menu with the high z-index... still cropped...

 

Link to comment
Share on other sites

In general, try to use z-index as little as possible.

How is overflow configured on the parent row? If it isn't allowed then the arrow will clip when you try to position it partly out of bounds.

Link to comment
Share on other sites

Hi.  I think it is something in the theme doing it as I added two rows with an icon on the second one on a different WP theme, and it did exactly as expected.  Moved up with a minus top margin, no z-index needed (as I agree.. that can cause other issues).  And went over the upper Div.

So I will refer it to our theme devs.  What should work in CSS, is being ignored for some reason.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.