Jump to content
Panda9386

Z-Index issues with modal and dropdown menu

Recommended Posts

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 by Panda9386

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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. =(

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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 by Panda9386

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

"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>

 

Share this post


Link to post
Share on other sites

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 =)

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×