Как вывести блок на передний план css

Вынести элемент на передний план с помощью CSS

Я не могу понять, как вывести изображения на первый план CSS . Я уже пробовал установить z-index на 1000 и положение относительно, но все равно не удалось.

#header < background: url(http://placehold.it/420x160) center top no-repeat; > #header-inner < background: url(http://placekitten.com/150/200) right top no-repeat; > .logo-class < height: 128px; > .content < margin-left: auto; margin-right: auto; table-layout: fixed; border-collapse: collapse; > .td-main < text-align: center; padding: 80px 10px 80px 10px; border: 1px solid #A02422; background: #ABABAB; >

body> div id="header"> div id="header-inner"> table class="content"> col width="400px" /> tr> td> table class="content"> col width="400px" /> tr> td> div class="logo-class"> div> td> tr> tr> td id="menu"> td> tr> table> table class="content"> col width="120px" /> col width="160px" /> col width="120px" /> tr> td class="td-main">text td> td class="td-main">text td> td class="td-main">text td> tr> table> td> tr> table> div> div> body>

Запустить фрагмент кода Скрыть результаты

Как вывести элемент на передний план с помощью css?

Привет, я работаю над сайтом WordPress, и я пытаюсь разместить короткий код для обратного отсчета только на моем заголовке. То, что я пытался сделать, это поместить этот короткий код с помощью CSS, но проблема в том, что он идет под моим заголовком навигации Это то, что я применяю

.mycodes

Я также применил это

z-index: -1;

После поиска в Интернете, но div и shortcode исчезают И короткий код

[notdevice][flipclock]
[/notdevice]

Это веб-сайт, поэтому вы увидите, о чем говорите Я хочу, чтобы он отображался в заголовке вместо того, чтобы показывать позади него Кто-нибудь, пожалуйста, помогите

Tee Famakin 13 сен. 2016, в 12:05
Поделиться
попробуйте z-index: 9999; и position:relative
Rohan Khude 13 сен. 2016, в 09:29
ОК, танки, позволь мне сделать это
Tee Famakin 13 сен. 2016, в 09:31
или попробуйте z-index: -1; и position:relative
Rohan Khude 13 сен. 2016, в 09:32

Примечание: z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная). Используйте один из них.

Rohan Khude 13 сен. 2016, в 09:33
Возможный дубликат элемента Bring to front с использованием CSS
Rohan Khude 13 сен. 2016, в 09:35
Показать ещё 3 комментария
Поделиться:

1 ответ

z-index: -1;

поместит ваш элемент за все остальные элементы (а также фон из )

причина использования z-index состоит в том, чтобы принести элементы перед другими элементами или наоборот.

значение наследования z-index является auto . если ничто другое на вашей странице не индексируется z, вы можете попытаться установить z-index на 2. Если это не покажет ваш элемент, попробуйте увеличить значение до тех пор, пока не будет показан ваш элемент.

ваш навигатор btw имеет следующие правила css:

.include-nav

поэтому, чтобы поставить что-то ВЫШЕ, вы должны z-index до 9999.

Dustin 13 сен. 2016, в 09:48
Поделиться

Я думаю, что это очень простой вопрос опечатки, поэтому вместо ответа могут быть повторяющиеся вопросы, а также этот вопрос необходимо удалить. 🙂

Rohan Khude 13 сен. 2016, в 09:34

хорошо, если кто-то пытается поместить элемент перед другим с помощью z-index: -1; похоже, он не совсем понимает z-index, поэтому я попытался объяснить 🙂

Dustin 13 сен. 2016, в 09:36
как это опечатка, все, что я пытаюсь сделать, это плавать div на моей панели навигации
Tee Famakin 13 сен. 2016, в 09:44

@RohanKhude опечатка . = тип. Также Tee, плавающий в CSS, означает нечто совершенно иное, чем порядок наложения элементов.

Roope 14 сен. 2016, в 08:10
Показать ещё 2 комментария

Ещё вопросы

1 Объяснение о клоне необходим массив, содержащий клонируемые объекты
0 angular-ui-router: невозможно загрузить страницу состояния ребенка в поле зрения
0 Set Session в PHP электронной почте не работает
0 Временно отсоединить перетаскиваемое колесо мыши от карты масштабирования / панорамирования?
1 Как я могу установить плагин на Mac?
0 Как выбрать дату в jquery datepicker на основе другого jquery datepicker
1 Как отфильтровать строки панд на основе последней / следующей строки?
1 Как офлайн произнести английское слово в программировании Android?
1 Как отсортировать определенные элементы в ArrayList в Java?
0 сохранение значения с помощью атрибута span в html
0 Зацикливание SVG прямоугольников из базы данных
1 Запустите пользовательский скрипт перед генерацией статического HTML с помощью Pelican
0 Как сделать так, чтобы моя строка меню не выходила за пределы экрана?
0 присвоение атрибута данных модели
1 Удалить дубликаты в массиве Java [duplicate]
0 Как mysqli_fetch_row при использовании mysqli_multi_query
0 Может ли PHP использовать переменные до их определения?
1 Выберите внутренние кавычки между кавычками
0 CSS не переносится на новое содержимое вкладки
0 Совместное использование таблицы БД Mysql между разными учетными записями пользователей
1 Как просмотреть HTML-файл в частичном представлении ASP.NET MVC (не Razor)
0 Цвет чередующихся строк для каждого нового элемента dom, добавленного в angularjs
0 более 1 формы с отправкой с использованием другой функции
0 Mysql условие в предложении WHERE
0 используя один и тот же вид на страницах
0 преобразование текста: полная ширина не работает в Опере — HTML
0 c ++ открывает .txt файл и читает числа для размещения в массиве
1 Почему элементы CSS и Bootstrap исчезают с сервера экспресс-узла?
1 Как усечь массив numpy?
0 Как получить атрибуты внутри тега в узле с SimpleXML в PHP
1 Array.reduce короткого замыкания в Javascript
1 Как добавить несколько Shapes.Path в ListView в WinRT XAML?
1 Как убрать ограничение в ORTools
0 Перерыв на слово в iOS7
0 Как установить приоритет для таблиц?
1 Ошибка: (251, 5) ошибка: дублирующее значение для ресурса ‘attr / pivotX’ с config ‘
0 OpenGL кадровый буфер зависит от размера окна
1 тип безопасности (mypy) для параметров функции при использовании * args
0 Повысьте некопируемую ошибку при создании карт STXXL
1 ASP.net web api 2 error «Словарь параметров содержит пустую запись для параметра»
1 Создайте ссылку на раскадровку в рабочем элементе TFS программно
1 Ошибка tkinter.Text () (_tkinter.TclError: ожидаемое целое число, получено «sans»)
0 Чтение всех байтов файла BMP в c ++ и поворот изображения
0 Могу ли я создать объект в том же классе?
1 Написать характеристику BLE без обнаружения сервисов Android
1 Я пытаюсь добавить динамический заголовок в tablayout, но на основе этого заголовка я хочу отображать различные продукты
0 радио выбрано / не выбрано на основе выпадающего списка
0 Подключение к базе данных Sage 50 с использованием SQL
0 Неактивная пользовательская функция
1 Как удалить все неиспользуемые переменные в WebStorm?

Как вывести дочерний элемент на передний план?

Кнопки по 50% width, с position: absolute и z-index: 10 и opacity: 0
Блок с слайдером — с position: relative и z-index: 10 — содержит ссылки, по которым невозможно нажать, потому что кнопка его перекрывает.
Есть ли какая-то возможность сделать элементы внутри слайдера кликабельными, с учетом что поверх слайдера стоят невидимые кнопки?

Вопрос задан более трёх лет назад
250 просмотров

7 комментариев

Простой 7 комментариев