html – CSS block on top of all content

Question:

There is a small block at the edge of the screen. It expands on hover. The problem is that it does not "travel" over my content, but under it. More precisely, only for pictures (script banners with scrolling, etc.). Is it possible to make it go on top of everything? 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:

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

Strictly speaking, your element must have a z-index greater than the z-position of other elements on the page, that is, z-index: 100; maybe enough

Scroll to Top