Z index | Sololearn: Learn to code for FREE!

+1

Z index

Got two elements I’m trying to stack on each other ones a header the others and image . I concocted some code but who knows how messed it truly is lol cause I don’t . Any saviors out there help a noob out please

3/30/2018 12:03:33 AM

Jeffrey Ramirez

38 Answers

New Answer

+4

「HAPPY TO HELP」 , thank you 😍😍 😊😄, just following your leads yes I will 👍🙋

+4

@Morpheus is there a way in CSS to get the Z index of the parent and increase it by one?

+3

Dam, Ima try this tomorrow looking forward to it thank you guys will touch back with you then !

+3

+3

not for keyframes I'm actually looking for more so for the purposes of a dynamic modal Handler. and just sorting out what I can do and CSS and what needs to be done in JavaScript. I know you can use the calc function in the CSS but I don't know much about it and whether or not I would be able to use it to pull the Z index and add one to value of the parent

+3

I guess not Michael, but check it out though, calc() is meant to simplify length width issues in different units, but it won't be able to read zIndex, I think transitions and animations are the only CSS ways but I ll look into it more

+3

thank you for the help Bud. I guess It will just be something I'll have to handle on the JavaScript end. it just would have been really nice to be able to build all the objects up front and as you move the parent just have the children dynamically update through CSS. not a big deal to add a function for it either though I guess.

+3

Michael Simnitt , yes we should strive for CSS only solutions first it's best in many ways, is that modal code started? we ll take our discussions there

+3

just a simple prototype that's kind of old in my codes. was hoping to learn from your example and make a library out of it that's got a little bit more Rich features

+3

Michael Simnitt , I ll be glad to participate 🙋, sounds awesome

+3

It'll be better if you post the code on the playground so you can see if thats the effect you wanted

+3

no youre just learning, dont feel sorry! its not annoying :)

+2

Well one thing people usually leave out is that the position has to be absolute in order to use z indexing CSS position: absolute; z-index: -1; /* This changes of course */ If you post code it will be easier to help and fix!

+2

4 things for overlaying 1. position of element on top must be absolute. 2. position of it s parent element must not be static , or left, right , top, bottom won't work for the child 3. use a z-index greater than the parent, by default z-index is 0 , so any big integer value will do, -ve value will hide it behind the background 4. use top, right, left, bottom on the overlay element to align it as u like it, and always position it using any 2 adjacent like top & right, top & left , bottom & right or bottom & left

+2

it's a good doubt, here's a template to remember it parent Element { position: relative; } child Element { position : absolute; z-index : 5; top : 20px; right: 30px; }

+2

@Michael, ok would keyframes won't work with zIndex?

+2

Yea i dont mind haha post it here and we'll all get a notification

+2

well youre missing a </head> inside your head have a style tag <style> </style> make your p have an id, say id="top" and the bottom have an id="bottom" inside the style tag #top{ position: absolute ; z-index:1; } #bottom{ position: absolute; z-index:0; }

+2

the .p is wrong because . is if you have a class attribute

+2