Timeline z-index

Development

AI-generated summary

Timeline z-index

The discussion revolves around a plugin that floats above selected text, but is being obscured by the timeline and top banner. kgish is experiencing this issue and has tried increasing the z-index, but it doesn’t seem to be enough.

Falco requests a page to see the issue in action, but kgish provides a screenshot instead. cpradio inquires about the z-index value and DOM location of the plugin.

kgish shares the code, which shows that the z-index is being set to a value higher than the timeline container. However, simon explains that the issue is due to the elements being in different stacking contexts.

cpradio confirms this and suggests that the solution might involve manipulating the DOM. kgish is unsure about how to proceed, but cpradio recommends applying a negative margin to the popup to keep it within its container and avoid overlapping with the timeline.

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?

3

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

blob.jpg800×596 152 KB

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.’

7

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

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.