When 1800 > 5250

[Meddysong]

Have a look at this from my site and the respective z-indexes:

The respective elements have the following properties:

#elProfileHeader .ipsUserPhoto {
    position: relative;
    z-index: 1800;
}

element.style {
    left: 48.2188px;
    top: 48px;
    position: absolute;
    z-index: 5250;
    opacity: 1;
    display: block;
}

Curiously, if #elProfileHeader .ipsUserPhoto falls under 1000, everything is normal, with 5250 on top.

Everything works normally on the default theme. This isn't really a custom theme; I've just changed the CSS rather than hacking the templates.

Can anybody spot the cause? Here's the page where it's happening.

[christopher-w]

The link takes you to a protected page.

But taking a look at a user profile, I can see this:

 

 

Which was easy to fix by increasing the z-index of the header, or reducing the z-index of the main page content.

 

In this case I changed the z-index of the following to 1: (Btw, I doctored the height of the menu to get it to intersect the profile photo.)

 

If this isn't the problem then send me a link to the page that the public can view. Best to logout before you the grab the link.

Remember z-index is relative to elements at the same level within that branch of the dom. Therefore, increasing for example, the z-index of the menu, will not impact it's z relationship to the profile photo as they are on different DOM branches.

The easiest solution I've found  is to trace both up the tree until they meet, in the case one level below body, and adjust the z-indexes there. So, if branch A has a z-index of 5 and branch B has an index 0f 3, all of branch A will appear above everything in branch b, immaterial of the z-indexes of branch B child elements.

There are caveats to this whereby an absolutely positioned element can appear to ignore its z-index, but this is usually due to where the absolute positioned element surfaces in the dom. And this is subject to the first relatively positioned parent element.

I'm no expert on the above and there's likely a more accurate description, but these rules usually work for me. Generally, if I'm having to change z-indexes all across the site, then there's something wrong with my approach and I rework the DOM. Caveats to this being there are almost always cases where adjustments have to be made for one reason or another. Typically menus, YT videos, Flash objects etc.

HTH,

Chris

 

[newbie LAC]

Your custom.css

.ipsNavBar_primary {
	position: relative;
	padding: 20px 5px 26px;
	margin-top: 20px;
	top: -26px;
	z-index: 1000;
	background: transparent none repeat scroll 0% 0%;
	border-radius: 2px 2px 0px 0px;
}

vs

framework.css

.ipsNavBar_primary {
	position: relative;
	padding-bottom: 40px;
	top: -36px;
	z-index: 2000;
	border-radius: 2px 2px 0px 0px;
}

 

[Meddysong]

20 hours ago, christopher-w said:

But taking a look at a user profile, I can see this:

Oh, no, that's my ugly face! Make it go away! 🙂

17 hours ago, newbie LAC said:

Your custom.css

vs

framework.css

Thank you, doctor, for a perfect diagnosis. I'm sure there must have been a reason for me to have made the change but I've no idea what it was so back it goes 🙂