SOLVED: Use z-index to get thumbnail popup image to top?

[RecPerch]

Hi.

SOLVED: See the post below from 08/15/2017.

I have a FIXED toolbar in my HTML 5 Top Nav help. Works fine. I use a lot of thumbnail popups for my screenshots. What I'd like to do is tell the full-size image to be on top (to cover the toolbar) after the thumbnail is clicked. The following example shows the toolbar on top.

ToolbarOnTop.png

The toolbar css has a z-index: 10;

I've been trying to figure out where to put a z-index: 20; for my full-size popup screenshot. So based on this:

Code: Select all

<a class="MCPopupThumbnailLink MCPopupThumbnailPopup" href="../Resources/Images/AI/WL.png"><img class="MCPopupThumbnail img" ...

I've added all the following to my css without luck:

Code: Select all

img { z-index: 20; }

.MCPopupThumbnailPopup { z-index: 20; }

.MCPopupThumbnailLink { z-index: 20; }

.MCPopupThumbnail { z-index: 20; }

.MCPopupFullImage { z-index: 20; }

Thanks!

Gary

[devjoe]

When the thumbnail is expanded, it goes inside a div of class MCPopupContainer, so you want to write your css rule for div.MCPopupContainer
The trick to finding stuff like this is to look at the output in a browser and use the inspect feature to find the tag and sometimes the specific formatting on that tag which is making it appear the way it does.
However, in my output (Flare 12 HTML5 tripane), .MCPopupContainer has a z-index of 10001 which should already make it show on top. Maybe something is different for your situation, though.

[RecPerch]

Thanks, devjoe, your suggestion led me down the path to victory.

The "problem" turned out to be that element.style was overwriting it. I have no idea where the element.style values are coming from, but someone on another forum said to use !important in the css to overwrite it. Tried that and it worked!

So for those wondering:

Before the fix, the element definition for .MCPopupContainer in the inspector showed z-index: 10001; BUT it was crossed out. The element that overrode it was element.style, which doesn't exist in a stylesheet, it's added during compile based on I-don't-know-what. This is what element.style looked like in the inspector:

Code: Select all

element.style {
    top: 980.566px;
    left: 10px;
    z-index: 1;
}

The fix was adding !important to the z-index for .MCPopupContainer and that worked:

Code: Select all

.MCPopupContainer {
        z-index: 20 !important;
}