Can someone tell me why the more menu is doing this? I’d appreciate your help, thanks. 
It’s a little difficult to tell what’s happening here, but my first guess is that you’ve got a z-index issue. z-index controls the way elements stack and overlay each other in the page; elements with higher numbers will overlay elements with lower z-indexs.
In your screenshot, I can see .tc-tiddler-frame span.tc-tiddler-controls { z-index: 2 — quite a low number. The .tc-tiddler-controls span is the parent of the “more menu” dropdown, so if it has a lower z-index than an element that follows it, it (and all its children, including the dropdown) will appear to disappear behind that element. Even without access to all your CSS, I was able to cause a similar issue on TW-com:
You should try to avoid using z-index in TiddlyWiki unless you are fully aware of its effects on surrounding HTML.
TiddlyWiki, by default, tends to follow “natural” HTML text flow and ordering for good reason: once you are tempted to enter the world of “stacking contexts”, you suddenly have more work ahead of you to make sure “weird things” don’t happen to elements that used to work perfectly – as you’ve discovered.
TiddlyWiki will use z-index only to elevate elements that step outside the natural HTML text flow (examples might include popups, menus, etc.). In your case, as @etardiff, pointed out, it seems the z-index in your popup/dropdown has been modified from the TiddlyWiki default value of 1000.
Note the value 1000 is only arbitrary when viewed out of context. You can be sure it slots into the stacking contexts defined by Jeremy Ruston at the time the related code was developed. I’m also fairly sure the value 2 is completely arbitrary and does not sit well with any stacking context in use by TiddlyWiki. ← that is your problem, I believe.
1 Like
@CodaCoder & @etardiff I actually added that z-index to get it to appear on top (because it was already doing that without the z-index) but it didn’t work. After your replies, I changed it to 2000 & it still doesn’t work.
Here is the page URL, if that helps.
I’m not sure whether this really addresses the root of your problem, but worth noting that z-index only works with positioned elements. If your new definition doesn’t already include position, you’ll need to add it (as I did in my quick test above) in order to see any effects.
… actually! I’d noticed it in your screenshot but hadn’t really put the pieces together… are you using any styles that change the opacity of the tiddler frame? Opacity rules (and CSS filters and transforms… I’m not well-versed enough to guess which you’re using) do not tend to play well with z-index: they create a new stacking context, so other elements may not get positioned the way you’d expect relative to the semi-opaque element.
If this sounds like the possible culprit, here’s a decent article where you can read more: What No One Told You About Z-Index — Philip Walton
Edit: Yup, that’s it. Removing backdrop-filter: blur(5px); from your .tc-tiddler-frame style resolves the overlap.
And if you don’t want to lose the filter effect, adding it to the popup places it in the same stacking context as the tiddler frame, so its built-in z-index applies correctly again. I replaced the entire line where you’d set the tiddler controls’ z-index with .tc-tiddler-frame .tc-popup { background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); } (note: no !important needed, and it’s also best avoided) and that seems to work.
You may need to add some additional rules to catch other elements that expect a certain stacking order… and I can’t promise that you won’t end up in a stacking arms race. 
But as a quick fix, I think this is viable.
Thanks so much for trying to help me. Unfortunately, I’m still having issues with this. I added the blur & background to the pop up, but that didn’t work. So, I added position: relative !important; z-index: 5000 !important;
…and now, while it is finally appearing on top, I’m getting this funky placement. 
