simona6 Posted June 24, 2021 Share Posted June 24, 2021 (edited) 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... Edited June 24, 2021 by simona6 Quote Link to comment https://forums.phpfreaks.com/topic/312970-how-do-i-put-a-div-in-front-of-the-top-and-bottom-divs-via-z-index/ Share on other sites More sharing options...
requinix Posted June 24, 2021 Share Posted June 24, 2021 A screenshot isn't the most helpful thing. Got a link to the webpage? Quote Link to comment https://forums.phpfreaks.com/topic/312970-how-do-i-put-a-div-in-front-of-the-top-and-bottom-divs-via-z-index/#findComment-1587520 Share on other sites More sharing options...
simona6 Posted June 24, 2021 Author Share Posted June 24, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/312970-how-do-i-put-a-div-in-front-of-the-top-and-bottom-divs-via-z-index/#findComment-1587521 Share on other sites More sharing options...
simona6 Posted June 24, 2021 Author Share Posted June 24, 2021 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... Quote Link to comment https://forums.phpfreaks.com/topic/312970-how-do-i-put-a-div-in-front-of-the-top-and-bottom-divs-via-z-index/#findComment-1587522 Share on other sites More sharing options...
requinix Posted June 24, 2021 Share Posted June 24, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/312970-how-do-i-put-a-div-in-front-of-the-top-and-bottom-divs-via-z-index/#findComment-1587527 Share on other sites More sharing options...
simona6 Posted June 25, 2021 Author Share Posted June 25, 2021 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. Quote Link to comment https://forums.phpfreaks.com/topic/312970-how-do-i-put-a-div-in-front-of-the-top-and-bottom-divs-via-z-index/#findComment-1587539 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.