# Timeline z-index
**URL:** https://meta.discourse.org/t/timeline-z-index/50797
**Category:** Development
**Created:** [2016年九月28日 14:43 UTC](https://meta.discourse.org/t/timeline-z-index/50797 "2016-09-28T14:43:24Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@kgish](https://meta.discourse.org/u/kgish)
#### Post date: [2016年九月28日 14:43 UTC](https://meta.discourse.org/t/timeline-z-index/50797/1 "2016-09-28T14:43:24Z")
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?
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2016年九月28日 15:05 UTC](https://meta.discourse.org/t/timeline-z-index/50797/2 "2016-09-28T15:05:57Z")
Do you have a page where this is working so we can see it?
---
### Author:  [@kgish](https://meta.discourse.org/u/kgish)
#### Post date: [2016年九月28日 19:03 UTC](https://meta.discourse.org/t/timeline-z-index/50797/3 "2016-09-28T19:03:23Z")
Here’s a screenshot which I hope illustrates the problem.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年九月28日 19:17 UTC](https://meta.discourse.org/t/timeline-z-index/50797/4 "2016-09-28T19:17:36Z")
What z-index value are you using for your control (out of curiosity) and where in the DOM does your component get loaded?
---
### Author:  [@kgish](https://meta.discourse.org/u/kgish)
#### Post date: [2016年九月28日 19:39 UTC](https://meta.discourse.org/t/timeline-z-index/50797/5 "2016-09-28T19:39:55Z")
Here’s the code:
```kavascript
// 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:
```plaintext
annotationEditorShown: z-index => timeline_container="499", \
position="absolute", z_annotator_widget="auto" => "500", \
position="absolute"
```
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2016年九月28日 20:17 UTC](https://meta.discourse.org/t/timeline-z-index/50797/6 "2016-09-28T20:17:19Z")
It has to do with the two elements not being in the same ‘stacking context.’
> **[What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)**
>
> Thoughts on web development, open source, software architecture, and the future.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年九月28日 20:30 UTC](https://meta.discourse.org/t/timeline-z-index/50797/7 "2016-09-28T20:30:08Z")
Yeah, that is what I was trying to get to with asking where in the DOM the annotationEditor is being placed.
---
### Author:  [@kgish](https://meta.discourse.org/u/kgish)
#### Post date: [2016年十月6日 21:09 UTC](https://meta.discourse.org/t/timeline-z-index/50797/8 "2016-10-06T21:09:58Z")
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.
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年十月6日 21:20 UTC](https://meta.discourse.org/t/timeline-z-index/50797/9 "2016-10-06T21:20:30Z")
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.