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
Важным для понимания моментом является то, как браузер по умолчанию позиционирует элементы:
- Первым всегда идёт элемент HTML. Поверх него накладываются все остальные элементы.
- Далее идут все элементы в нормальном потоке документа. Элементы идут по всем правилам расположения блочных и строчных элементов. Они позиционируются в том порядке, в котором определены внутри HTML-документа.
- В конце накладываются все элементы с
position
в том порядке, в котором они определены внутри HTML-документа. Это можно увидеть на примерах выше.
Попробуем поменять порядок элементов в последнем примере. Для этого установим второму и третьему блоку такие значения, чтобы они поменялись местами. Необходимо для блока .block-two
установить значение z-index
больше, чем у блока .block-three
. В результате третий блок «исчезнет», так как имеет меньшие размеры:
Свойство z-index может принимать отрицательные, положительные значения и ноль. Здесь нет никакой магии и отрицательные значения будут находиться «ниже» положительных. В реальных проектах хорошей практикой считается установка значения
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 пикселей высотой 3 Используйте свойство CSS z-index. Элементы с большим значением z-индекса располагаются перед элементами с меньшим значением z-индекса. Обратите внимание, что для того, чтобы это работало, вам также необходимо установить стиль 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/
? position
( position:absolute
, position:relative
или position:fixed
позиция: абсолютная/фиксированная...