4

Есть блок с краю экрана небольшой. При наведении он расширяется. Проблема в том, что он "выезжает" не поверх моего контента, а под него. Точнее только под картинки (скриптовые банеры с прокруткой и тп.) Можно ли сделать так, что бы он выезжал поверх всего? 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;        
    }  
3
  • @OlegShleif, не стоит изменять код в вопросах(кроме форматирования, если оно не является синтаксически значимым), порой подобные "опечатки" и являются причиной возникновения проблемы.
    – vp_arth
    7 мар 2017 в 9:54
  • Я изучил вопрос, и данная 'ошибка' совсем не к месту, а куча пользователей которые ещё не сильно знакомы со стилями могут скопировать себе не совсем верный код. Поэтому было принято решение на изменение. Но, как я понял, вы видите это с иной стороны 7 мар 2017 в 11:14
  • а есть ещё варианты кроме z-index? в случае если такое позицинирование не подходит..
    – Иван
    20 дек 2017 в 7:29

2 ответа 2

13

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

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

1
  • не обязательно такой большой ставить :)
    – Grundy
    15 фев 2016 в 19:24
3
div.nav:hover {
        position: fixed;
        right: 5px;
        top: 80%;
        width:347px;
        height:160px;  
        display: block;
        z-index:99999999;        
    }  

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.