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?

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

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

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

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"

It has to do with the two elements not being in the same ‘stacking context.’ What No One Told You About Z-Index Thoughts on web development, open source, software architecture, and the future.

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

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.

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.

Timeline z-index

Development

simon Septembre 28, 2016, 8:17 6

It has to do with the two elements not being in the same ‘stacking context.’

Sujet		Réponses	Vues
Admin wrench overlaps notifications menu UX	2	868	Septembre 22, 2015
"Your topic is similar to..." popup goes under the logo header! UX	9	2998	Décembre 28, 2015
Timeline display bug (mobile) UX	0	444	Mai 29, 2022
Select-kit obscured by post body Product Support	14	1151	Octobre 11, 2018
Custom user state overlay on user menu UX	1	408	Janvier 29, 2023

Timeline z-index

Sujets connexes