Jump to content

[Solved] Z-Index not working as expected


Kit the Human
 Share

Recommended Posts

I am so confused.

 

https://www.pirate-rp.site/index.php

 

You need to use a mobile view, so inspect element away!

 

Open up the menu up top. The menu sits on top of everything except the header's H2 and the forum images. Why??

 

ul.mobile-menu-content {
		position: relative;
		z-index: 9999;
		padding-top: 2rem;
		background: rgba(44, 105, 99, 1);
		list-style-type: none;
		text-align: center;
		font-size: 2rem;
		flex-direction: column;
		justify-content: space-between;
	}

 

I can fix it by getting rid of the relative positioning on both the header and forum images, but they're positioned for a reason. I give them a z-index of 1, and they still appear on top.

 

I thought that maybe flex was the problem, but removing flex had no effect.

 

I've tried absolute and fixed positioning for the mobile menu content, with no change.

 

I'm using Opera. I checked with Firefox, issue still present.

 

Erm, anything else I can try? Am I missing the obvious?

 

Edited by Kit the Human

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

  • Admin

Easy fix: Put the mobile menu code at the end of your code. I have had this issue before but really it's not a necessary element to be loaded to early and I used Firefox developer version and moved it to the bottom (just above </body>) and it fixed the issue altogether @Kit the Human

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

Ooo you're right! The welcomeblock variable (with the member links like UCP etc) actually works in the footer, I didn't know that.

 

So I threw the code into the bottom of the footer and it's fixed everything! ....Except for the header link. I don't fancy putting it into a bunch of templates so I'll rethink my header instead. Thank you!

  • You're Welcome 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.