:focus outline being overlapped.
Hey, so my focus outline on this button is being overlapped by the div as you can see in the image. I can't seem to re-create this problem in codepen so i understand if no one can give any proper advice, i'm more trying to see if anyone has had this happen to them or knows what could cause it. My structure is like so:
.container has position: relative; on it and when i seem to remove that it fixes it. it also fixes it when i give the button z-index: 99; (or simply just a high z-index). I have nothing such as z-index making one appear above/below the other, so i'm simply lost on this
I'd appreciate if anyone knows anything. Thanks in advance.
32 Replies
please, make a codepen or jsfiddle where we can see the issue ourselves
i can try figure something out but i put the same snippet of stuff into codepen and it doesn't replicate the problem, i mentioned this.
then that's where you start your debugging adventure and add more code
then you take off some code, and see if it is still broken
until you get to the point where the bug happens but doesn't if you remove a line
or until you don't know but have a reasonable amount of code
ah i managed to re-create it, sorry. so essentially if
.container has a background color, it hides the focus outline? is this normal behavior? and would you say adding a z-index is a good fix or not really?
https://codepen.io/deerCabin/pen/oNKqagzweirdly enough, it's the
position: relative that's causing ityeah that's what's baffling me haha
i'm not really sure how that causes that
me too, a little
and i have no idea either
but since you don't need it, just remove it
this is just a snippet as i say, there's an absolute element tied to it in the project so unfortunately i need to keep it
how about you do the nasty thing of putting it all inside another div that has the position relative?
i don't like it, but it works
yeah that seems to do it. Thanks for helping
do you think the conflict with relative is a bug?
or just a weird behaviour
actually, it doesn't, because the
x still gets on top of it ...
hm
do you think
position: relative gives the div a higher z-index?it probably is doing something funky to create a new context
i found a much better fix, that is also worse
what's that?
change nothing on your code, and add
position: relative; z-index: 1; to your buttonah i see. so if adding
position: relative; to the button also fixes it it must be a stacking context thing as you say.
Stack Overflow
Why position: relative without z-index creates a new stacking context?
From this article:
Two elements with the same stack level are layered based on their source order. Successive elements stack on top of their predecessors.
And from this:
A stacking context is
this'll most likely be it
it doesn't fix it, but it's half the way there
you do need the
z-index: 1 for it to draw on top of the other elementoh okay i see.
but try it yourself, you will see
if you notice, all i changed was the z-index
ah i see, yeah.
it's weird, but it is what it is
Yeah. How do you recommend going about debugging these sorts of things? That doesn’t seem like an expected behaviour you’d imagine, so I gather those things are very hard to debug
exactly how i told you:
- grab everything you have
- shove it somewhere
- delete code until it works
- go back until it doesnt
- repeat until you find what is causing the bug
there's no magic to it: just grunt work and brute force your way to the solution
obviously, you can use your knowledge of the code to reduce the code more effectivelly with each iteration