New course! Every coder should learn Generative AI!
Try a free lesson+ 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
25 Answers
+ 4
@Morpheus is there a way in CSS to get the Z index of the parent and increase it by one?
+ 3
「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」 , thank you 😍😍 😊😄, just following your leads
yes I will 👍🙋
+ 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
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
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
+ 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
Dam, Ima try this tomorrow looking forward to it thank you guys will touch back with you then !
+ 2
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
+ 2
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
+ 2
Michael Simnitt , I ll be glad to participate 🙋, sounds awesome
+ 2
Jeffrey Ramirez it would be easier to communicate if you could head over to the code playground and click the + symbol then choose web , to create this web code.
discussion will be easier about the code in the code itself
😊👍
+ 1
@Michael, ok would keyframes won't work with zIndex?
+ 1
Ima try what morpheus said
+ 1
I made that code public. Also I clicked the + symbol , choose web and it gave me a new HTML document ?
0
Peeps! Anyone interested in looking at my code to see if they can guide this lost dog of a beginner coder hahah
0
Here’s my html
0
Trying to send it but keeps saying somethings wrong error ..
0
I’ll just send the first half
0
<!DOCTYPE html>
<html>
<head>
<title>The Combs</title>
<body>
<h1>
<p align="center">Bienvenidos chachos a <br/>Los Catacombes</h1>
<img alt="" class="img-circle" src="http://www.protothema.gr/Images/ImageHandler.ashx?m=Fit&f=Ly8xMC4xNTAuMC40L3B0d2VibC9maWxlcy8xLzIwMTcvMDgvMzAva2F0YWtvbWJzLXBhcmlzLW5ldy5qcGc%3d&t=0&w=1000&h=1000" height="200px" width="525px" alt=""/>
<hr/>
<p align="center">This page is for all of us who have been dumped hurt abandened forgetten and taken for a ride . What we gave was our all , at las it brought us nowhere near our intended goal. This is ovbious but the soul proupose of this page is to physically show how much time we beat our selves up in an effort to break the chain of mental abuse , and to guide us to peace first and foremost .. then with self improvement a kick ass job car pad and luck, can we find everlasting love. </p>
Often have questions like this?
Learn more efficiently, for free:
Hot today
USING HTML ONLY!!!
5 Votes
Effects on HTML and JavaScript
0 Votes
Programming sickness
3 Votes
Help. Помогите пожалуйста
1 Votes
Izzy the iguana
0 Votes
Помогите пожалуйста
0 Votes