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…

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

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_timeli…

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, …

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

kgish (Kgish) September 28, 2016, 7:03pm 3

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

Topic		Replies	Views
Admin wrench overlaps notifications menu UX	2	864	September 22, 2015
"Your topic is similar to..." popup goes under the logo header! UX	9	2981	December 28, 2015
Timeline display bug (mobile) UX	0	440	May 29, 2022
Select-kit obscured by post body Product Support	14	1111	October 11, 2018
Custom user state overlay on user menu UX	1	404	January 29, 2023

Timeline z-index

Related topics