46 replies

: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:

<div>
  <div>
    <button>button</button>
  </div>
  <div class="container">
    ...
  </div>
</div>

<div>
  <div>
    <button>button</button>
  </div>
  <div class="container">
    ...
  </div>
</div>

<div>
  <div>
    <button>button</button>
  </div>
  <div class="container">
    ...
  </div>
</div>

<div>
  <div>
    <button>button</button>
  </div>
  <div class="container">
    ...
  </div>
</div>

.container

.container

.container

.container has

position: relative;

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;

z-index: 99;

z-index: 99;

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.

:focus outline being overlapped.

Similar Threads

Similar Threads

Similar Threads