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

3 ответа 3

13

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

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

1
  • не обязательно такой большой ставить :)
    – Grundy
    15 фев 2016 в 19:24
5

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


z-index

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

Источник

0
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 that you have read and understand our privacy policy and code of conduct.

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