0

I noticed an inconsistent browser behavior regarding a fixed (css position fixed) element that is floating out of another fixed element. I use the jQuery "hover" method to show and hide the second element.

$("#listitem").hover(
    function() {
     $("#sublist").css({visibility: "visible"});
    }, function() {
       $("#sublist").css({visibility: "hidden"});
    }
)
#div1 {
  position: fixed;
  z-index: 5;
  overflow-y: scroll;
  width: 200px;
  height: 100px;
  background-color: red;
}

#sublist {
  position: fixed;
  visibility: hidden;
  z-index: 10;
  left: 180px;
  top: 0;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <ul>
    <li id="listitem">1
      <ul id="sublist">
        <li>U1</li>
        <li>U2</li>
        <li>U3</li>
      </ul>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>

See it in action (hover the first list element): https://jsfiddle.net/manueltaber/ras930wz/

In Chrome the second fixed element is always displayed under the browser scrollbar. In IE (and Edge too) the second element seems right, but when i hover the mouse over the scrollbar the div dissapears. Only Firefox works as expected.

Is it possible to show the second element always over the browser scrollbar?

Manuel Taber
  • 427
  • 5
  • 19
  • Possible duplicate of [Placing a fixed element above browser's scrollbar](https://stackoverflow.com/questions/16365320/placing-a-fixed-element-above-browsers-scrollbar) – GalAbra Jan 08 '18 at 10:23
  • 1
    Possible duplicate of [Placing a fixed element above browser's scrollbar](https://stackoverflow.com/questions/16365320/placing-a-fixed-element-above-browsers-scrollbar) – GalAbra Jan 08 '18 at 10:25
  • @GalAbra the duplicate is wrong, this is not the browser's scrollbar, but an HTML element's one. @ManuelTaber you can take a look at [the accepted answer here](https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning). One of the solutions is to remove the `ul#sublist` from the `li#listitem` element and place it before `div1` in term of HTML elements order – Kaddath Jan 08 '18 at 10:42

0 Answers0