Z index

Question

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

Answer 1

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」 , thank you 😍😍 😊😄, just following your leads
yes I will 👍🙋

Answer 2

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

Answer 3

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

Answer 4

Morpheus ;3

Answer 5

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

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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!

Answer 14

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

Answer 15

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;
}

Answer 16

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

Answer 17

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

Answer 18

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;
}

Answer 19

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

Answer 20

just be p and img on css