There is a block with the edge of the small screen. Hovering it expands. The problem is that he “leaves” are not on top of my content, and under it. Or rather only a picture (script with scrolling banners, etc). Is it possible to do so, that he went over all? CSS:

div.nav {
    display: block;
    position: fixed;
    right: 6px;
    top: 80%;
    display: block;
    height: 160px;
    width: 33px;
    background: url (../ img / helpback.jpg) no-repeat;
    line-height: 50px;
    transition: all .7s ease-out;
    border: 1px solid # 333;
    border-radius: 2em;
  }
  div.nav: hover {
    position: fixed;
    right: 5px;
    top: 80%;
    width: 347px;
    height: 160px;
    display: block;
  }

Answer 1, Authority 100%

Add the rule div.nav property of the z-index: 999999;

Strictly speaking, your element should have a value of z-index greater than the position on z-axis of the other page elements, ie, and values ​​z-index: 100; can be quite

Answer 2, authority 45%

Simply put z-index more than others.

z-index

Any positioned elements on a Web page can be imposed
at each other in a certain order, thus simulating the third
dimension perpendicular to the screen. Each element may be
as below, so above and other objects of the web page, placing them on the
z-axis controlled z-index. This feature only works for items
whose position value is set as absolute, fixed or relative.

Source

Answer 3, authority 27%

div.nav: hover {
    position: fixed;
    right: 5px;
    top: 80%;
    width: 347px;
    height: 160px;
    display: block;
    z-index: 99999999;
  }