Блок на передний план css: javascript — Div на передний план

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

Вопрос задан

Изменён 1 год 7 месяцев назад

Просмотрен 95k раз

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

3

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

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

1

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


z-index

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

Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Источник

0

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Наложение элементов | CSS: Позиционирование элементов

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

В уроке про плавающие элементы вы могли увидеть, что элементы HTML могут накладываться друг на друга.

Такое же поведение было при выставлении позиционирования отличного от нормального. Наложением элементов можно управлять и с помощью CSS-свойства z-index. Из названия свойства можно увидеть, что речь идёт об оси z.

Эта ось отвечает за то, какие элементы будут располагаться на переднем, а какие на дальнем плане. Попробуем использовать на трёх блоках абсолютное позиционирование:

Возникнет естественный вопрос: «А где остальные два блока?». Они скрылись за последним блоком .block-three. Когда мы дали каждому блоку абсолютное позиционирование, то начали в одном и том же месте накладывать блоки друг на друга. Первым в угол встал блок .block-one, после этого у браузера возникла задача переместить блок .block-two ровно на это же место. Для этого он выставил приоритет по оси z второму блоку и наложил его на первый. Данная операция повторилась с последним блоком, и он занял видимую позицию, «заслонив» своих братьев.

При таком взаимодействии блоки никуда не исчезают из кода, это можно проверить, выставив разные свойства ширины и высоты для каждого из блоков:

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

  • absolute
  • relative
  • fixed
  • sticky

Важным для понимания моментом является то, как браузер по умолчанию позиционирует элементы:

  1. Первым всегда идёт элемент HTML. Поверх него накладываются все остальные элементы.
  2. Далее идут все элементы в нормальном потоке документа. Элементы идут по всем правилам расположения блочных и строчных элементов. Они позиционируются в том порядке, в котором определены внутри HTML-документа.
  3. В конце накладываются все элементы с position в том порядке, в котором они определены внутри HTML-документа. Это можно увидеть на примерах выше.

Попробуем поменять порядок элементов в последнем примере. Для этого установим второму и третьему блоку такие значения, чтобы они поменялись местами. Необходимо для блока .block-two установить значение z-index больше, чем у блока .block-three. В результате третий блок «исчезнет», так как имеет меньшие размеры:

Свойство z-index может принимать отрицательные, положительные значения и ноль. Здесь нет никакой магии и отрицательные значения будут находиться «ниже» положительных. В реальных проектах хорошей практикой считается установка значения

z-index с шагом в 100 при достаточно больших значениях. Это делается для удобства чтения и правок стилей:

z-index: 34234;
z-index: 43233;
z-index: 34324;

Определить, в каком порядке расположатся элементы, при таких значениях достаточно трудно. Необходимо вчитываться в каждую цифру. Сравните это с таким вариантом:

z-index: 34200;
z-index: 43200;
z-index: 34300;

html — Как сделать так, чтобы div отображался перед другим?

спросил

Изменено 2 года, 3 месяца назад

Просмотрено 367 тысяч раз

См. приведенные ниже коды:

 
  • <дел>

Из приведенных выше кодов мы знаем, что можем видеть только черный фон высотой 100 пикселей. Мой вопрос: как мы можем увидеть 500 пикселей высотой

черного фона? Другими словами, как сделать так, чтобы
отображалось перед
  • ?

    • HTML
    • CSS

    3

    Используйте свойство CSS z-index. Элементы с большим значением z-индекса располагаются перед элементами с меньшим значением z-индекса.

    Обратите внимание, что для того, чтобы это работало, вам также необходимо установить стиль position ( position:absolute , position:relative или position:fixed

    ) для обоих/всех элементов, которые вы хотите заказать .

    3

    Вы можете установить z-индекс в css

     

    0

    Чтобы элемент отображался перед другим, вы должны указать более высокий z-индекс переднему элементу и более низкий z-индекс заднему элементу, также вы должны указать позиция: абсолютная/фиксированная...

    Пример:

     
    Привет
    Мир

    1

    Верхний div использует более высокий z-index, а нижний div использует более низкий z-index, затем использует абсолютную/фиксированную/относительную позицию

    0

    Мне кажется, ты что-то упускаешь.

    http://jsfiddle.net/ZNtKj/

     
    • <дел>
  • <ул>
  • <дел>
  • В FF4 отображается черная полоса размером 100 пикселей, за которой следует красный блок размером 500 пикселей.

    Немного другой пример:

    http://jsfiddle.net/ZNtKj/1/

     
    • <дел>
    <ул>
  • <дел>
  • <дел>