CSS блок поверх всего контента

#html #css

Есть блок с краю экрана небольшой. При наведении он расширяется. Проблема в том,
что он "выезжает" не поверх моего контента, а под него. Точнее только под картинки
(скриптовые банеры с прокруткой и тп.) Можно ли сделать так, что бы он выезжал поверх
всего? 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;        
    }  

    

Ответы

Ответ 1

Добавьте правилу div.nav свойство z-index: 999999;

Строго говоря, ваш элемент должен иметь значение z-index большее, чем положение по
z-оси других элементов страницы, т. е. и значения z-index: 100; может быть достаточно


Ответ 2

Просто поставь z-index больше остальных.



z-index


  Любые позиционированные элементы на веб-странице могут накладываться
  друг на друга в определенном порядке, имитируя тем самым третье
  измерение, перпендикулярное экрану. Каждый элемент может находиться
  как ниже, так и выше других объектов веб-страницы, их размещением по
  z-оси и управляет z-index. Это свойство работает только для элементов,
  у которых значение position задано как absolute, fixed или relative.


Источник


Ответ 3

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