Panda9386 Posted December 31, 2017 Share Posted December 31, 2017 (edited) Hi! I am new here and was wondering if I could possibly get some help. I am having some serious trouble trying to figure out why my menu won't sit behind my modal. =( I have wracked my brain trying to figure out what it could be, but have not been able to come up with a conclusion. Please ignore the text as the page is obviously still in testing, but the page shows how the modal goes in front. I also have other issues with IE in that the menu doesn't show up properly, but that may be due to too many style tags? I do very much enjoy my CSS. lol Things have evolved since 2009 ^_^; Here is the link to the page in question and I am attaching the raw files that I think you would need to see where I may have done something wrong. Is it possible that they just aren't compatible? www.technicolor-dreams.net/ani-001.html Thanks in advance! =D -Sarah Also... If you could... Could you explain things as simply as possible? I am not as advanced with coding in knowing all the terminology such as parent and sibling elements. >_<! css.css ani-001.html menu.html Edited December 31, 2017 by Panda9386 Link to comment Share on other sites More sharing options...
dsonesuk Posted December 31, 2017 Share Posted December 31, 2017 You have to give navbar position: relative; and z-index lower than the modal background, BUT! you have a bigger problem in that you are using position: absolute; for layout purposes, which is a big NO-NO, will cause you more problems in allowing responsive html to flow and adjust to different devices. Also body html elements is not allowed in between <head>...</head> use link element instead to link to external css. Use float: margin: padding: display: for layout purposes and only use positioning for pop-ups and overlapping purposes as use for modal. validate html at https://validator.w3.org/ Link to comment Share on other sites More sharing options...
Panda9386 Posted January 1, 2018 Author Share Posted January 1, 2018 Thanks for the advice, but... I still can't get it to work. I have tried a buncha different combos and failed again. =( Is it possible to give me an example in how it will work? I am about to just give up, but really want to make this work, because it fits the vision i had for the layout. =( Link to comment Share on other sites More sharing options...
dsonesuk Posted January 1, 2018 Share Posted January 1, 2018 Any elements with z-index is relative to sibling element of the same level, and child elements of that element are only relative to child sibling elements of that level within that parent. A higher child z-index won't place it at a higher level than any parent sibling elements z-indexes, only the parent can do that. So a parent container is always the uppermost level to whatever its child element level is, this continues on with children elements of the child elements which is there parent and so on. NOTE: However early versions of Firefox, and maybe present version does not follow this rule completely, but you should follow this rule set up above. You have your modal position fixed using z-index: 999 within a parent element using z-index: 2; your navbar parent is using z-index: 3; like already mentioned the parent of z-index: 999, will be the highest above any children set levels, so navbar parent z-index: 3; is higher than modal parent z-index:2, so it will overlap the modal. 1 Link to comment Share on other sites More sharing options...
Panda9386 Posted January 1, 2018 Author Share Posted January 1, 2018 (edited) Thanks again! I think I am beginning to understand things a little more. I just want to make sure I understand parent-child elements. So the parent would be the CSS style sheet. Like the element defined in there. Then, the child would be what is in the body of the html file. So what I set in the css takes priority over everything else... Right? So... Essentially I need to focus on getting everything organized within the parent-child situation... I should sniff through some css tutorials some time. I feel like that would benefit me greatly... I'll report back once I do some editing! Thanks once again for the help! You're awesome! =) EDIT: OHMYGOSH!!!! IT WORKS!!!! THANK YOU!!!!!!!!! =D I think things are making a lot more sense now. the z-index is a lot more complicated than i originally thought. I thought you had to use it for everything, but you don't. Nifty =) Thanks again!!!! =D!!!!!!! Edited January 2, 2018 by Panda9386 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 2, 2018 Share Posted January 2, 2018 A element with id reference can only have a unique singular value within a page, you will find that only one of these multiple id reference elements with identical id is being used at a time, the rest will be ignored, and clutter up your page with unused html. Link to comment Share on other sites More sharing options...
Ingolme Posted January 2, 2018 Share Posted January 2, 2018 "Parent" and "child" refer to the relationships between HTML elements. The CSS stylesheet is not the parent of anything. In the following code, <div> is a parent of <span> and of <a>. <span> and <a> are children of <div> and are siblings of each other: <div> <span></span> <a></a> </div> Link to comment Share on other sites More sharing options...
Panda9386 Posted January 3, 2018 Author Share Posted January 3, 2018 Oooh!!! Ingolme, that is a perfect example!!! Thank you!!! I like visuals lol. That makes perfect sense now. I am trying my best to learn more! Thanks so much for taking time out to teach and help me! My site isn't perfect, but the vision is coming together thanks to your help =) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now