Timeline z-index

Dev
1

I’ve developed an annotator plugin which floats above selected text.

One problem I noticed is that the timeline and the top banner will remain above the the plugin popup thus obscuring it.

Tried increasing the z-index above that of the timeline but this doesn’t seem to be enough.

Any ideas what I may be doing wrong?

2

Do you have a page where this is working so we can see it?

2 Likes
3

Here’s a screenshot which I hope illustrates the problem.

blob.jpg800×596 152 KB

1 Like
4

What z-index value are you using for your control (out of curiosity) and where in the DOM does your component get loaded?

5

Here’s the code:

// TODO: The annotator widget appears behind the timeline and upper caption.
var timeline_container = $('.timeline-container');
if (timeline_container.length) {
    if (annotator_widget.length) {
        var z_timeline_container = timeline_container.css('z-index'),
        p_timeline_container = timeline_container.css('position'),
        z_annotator_widget = annotator_widget.css('z-index'),
        p_annotator_widget = annotator_widget.css('position');
        annotator_widget.css('z-index', ""+(parseInt(z_timeline_container) + 1));
        var z2 = annotator_widget.css('z-index');
        console.log('annotationEditorShown: z-index => timeline_container="'+z_timeline_container+'",  \
position="'+p_timeline_container+'", z_annotator_widget="'+z_annotator_widget+'" => "'+z2+'", \ 
position="'+p_annotator_widget+'"');
    } else {
        console.error('annotationEditorShown: could not find annotator widget');
    }
} else {
    console.log('annotationEditorShown: no timeline detected');
}

and here’s the output:

annotationEditorShown: z-index => timeline_container="499", \
    position="absolute", z_annotator_widget="auto" => "500", \
    position="absolute"
6

It has to do with the two elements not being in the same ‘stacking context.’
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

5 Likes
7

Yeah, that is what I was trying to get to with asking where in the DOM the annotationEditor is being placed.

2 Likes
8

I checked out the article about stacking context, and indeed after some hard reading I understand the concept.

However, none the wiser I still do not see a viable solution to my problem. Is this impossible to rectify or am I just missing something obvious.

Do I need to manipulate the DOM somehow, so due to the rearrangements I can “force” my popup to appear above the timeline.

Of course I’d rather not go that route.

9

Since you are in a different context, you need to ensure when the popup opens, it doesn’t place itself over the timeline. Usually that is done by applying a negative margin. The idea is that the popup will open in its entirety within the container it is in and not try and escape its container.