Как сделать блок поверх другого в css

Свойство CSS z-index. Проблема один элемент перекрывает другой.

Работая с позиционированием элементов на веб-странице можно столкнуться с тем, что один блок может «наехать» на другой блок, перекрыть и сделать часть его невидимой.

Вот пример такой ситуации.

Блок 1
 
Блок 2
 
Блок 3

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

«Блок 2» перекрывает «Блок 3», т.к. он находится выше по коду.

По умолчанию, на самом верху отображаются те блоки, которые находятся выше по коду. Но, что делать если нам нужно изменить порядок их отображения?

Для решения этой проблемы в css используется специальное свойство, которое называется z-index.

z-index: целое число | auto | inherit

Значением свойства z-index является целое число. Хотя в спецификации и написано, что это число может быть отрицательным, но я советую вам пользоваться только положительными числами, т.к. в старых браузерах могут быть проблемы с отображением отрицательного z-index.

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

Давайте попробуем для примера выше поменять порядок отображения блочных элементов.

Разместим «Блок 3» поверх «Блока 2».

Для этого обоим блокам присвоим свойство position:relative, для того, чтобы свойство z-index начало работать.

Блок 1
 
Блок 2
 
Блок 3

Все, теперь «Блок 3» отображается поверх «Блока 2».

Довольно полезное свойство и позволяет решать множество проблем верстки.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Как создать блок поверх блока изображения ?

почему так ? ведь z-index у блока .contents стоит больше почему он под блоком bgimg ?
подскажите пожалуйста я новичок , и только начинаю верстать свои шаблоны, и вот не могу понять как мне сделать так что-бы блок contents был поверх картинки ?

Ответил: clavik1312

Разобрался для того что-бы блок был поверх изображения в данном случае z-index не помогает
я решил выйти из ситуации по другому я наложил один блок на другой в CSS cпомощью margin
вот что у меня получилось:

.contents { margin-top: -65px; z-index:100; width: 144px; height: 450px; background-color: black > .bgimg { width: 1144px; height: 350px; background-position: center center; background-size: cover; >

вот что в итоге получилось:

а вот как это можно применить:

Похожие вопросы

Как вывести картинку в shortstory.tpl через background-image

12.12.2011 pleak Общие вопросы по вёрстке, Ламерские вопросы

Full-link и текст поверх картинки.

05.01.2013 Exile Общие вопросы по вёрстке, Ламерские вопросы

Помогите с hover свойством

09.04.2013 Гость Общие вопросы по вёрстке, Стили (CSS)

Не работает высота блока в профиле

20.10.2013 n1ghtman199 Общие вопросы по вёрстке

Проблема при выводе последних комментариев

29.11.2013 sotor Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), Хаки

Картинка в short-story с высотой auto

01.03.2014 enterlive Общие вопросы по вёрстке, Стили (CSS)

помогите пожалуйста как исправить это

20.03.2014 vardanpetrosyan Общие вопросы по вёрстке

помогите исправить блок

23.03.2014 vardanpetrosyan Общие вопросы по вёрстке

Адаптация скрипта под DLE

25.03.2014 TTATPuOT Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), jQuery

Кнопка Вверх

Последние события
Sinoid | Как сделать вывод статистики общего коли . 18

Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 20:33

в каждый
пару ключ+значение массива $resultArray[] ? Если примерно как ниже, то не знаю, будут ли такие пары без ошибок влезать в html:

+

>
?>

А если через массив тегов [ = $resultArray[zz] ], то вроде бы проще, но как в html перебирать весь массив тегов, если из html нет доступа к размеру такого массива (который меняется динамически), а в js-скрипте DLE-теги не работают?
3. Напиши пжл весь country.php ещё раз со всеми изменениями и с кэшированием.

rewenas | Как сделать вывод статистики общего коли . 18



rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 18:01

Сразу хочу сказать я в этом деле самоучка. Так что могу что то не так понимать и реализовывать
rewenas | Как сделать вывод статистики общего коли . 18



rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 17:59

1 Если тебе нужно вывести из $iso_countries массива только ключи то:

 $keys = array_keys($iso_countries); 

2 В смысле переопределять? Его никто даже не трогал. Или я тебя просто не понимаю. Я всего лишь думал что инпутом у тебя пользователи выбирают страну :в следствие чего у тебя в столбец land таблицы dle_users заноситься двухбуквенный код стран.

Ещё сделал выбор страны проживания, который заносится скриптом в стандартный DLE-тег в виде кода 249 стран списка ISO 3166-1 alpha-2

Поэтому этим кодом:

 if (isset($iso_countries[$country])) { $country_name = $iso_countries[$country]; $tpl->set('{land>', $country_name); > else { $tpl->set('{land>', 'Код страны не найден'); > 

Заменил этот двухбуквенный код на название страны
3 Тогда тебе нужно:

 $result = $db->query("SELECT land, COUNT(*) AS user_count FROM " . USERPREFIX . "_users WHERE land != '' GROUP BY land"); $resultArray = array(); while ($row = $result->fetch_assoc()) { $country = $row['land']; $user_count = $row['user_count']; $country_counts[$country] = $user_count; > foreach ($country_counts as $country => $user_count) { $resultArray[] = array( 'Страна' => $country, 'Количество пользователей' => $user_count ); > 

Результат запроса сохраняется в переменной $result. Далее создается пустой массив для хранения данных $resultArray = array(); И далее внутри цикла foreach в этот массив записывается каждый элемент массива $country_counts в виде массива с ключами страна и количество пользователей. Наверное это то что тебе как раз надо

Sinoid | Как сделать вывод статистики общего коли . 18



Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 16:53

rewenas, Спасибо. Но:
1. $iso_countries будет содержать только коды. Названия стран потом будет выводить скрипт.
2. нельзя переопределять. Он мне нужен сам по себе как доп. поле каждого юзера. Туда заносится выбор страны юзером и оттуда отображается страна и флаг рядом с аватаром юзера в его комментах и в профиле.
3. На выходе из PHP мне нужен только сортированный (или нет) массив ненулевых количеств юзеров по каждой стране. Далее этот массив будет обрабатываться скриптом через библиотеку Chart.js , чтобы выводить диаграмму по всем странам. Bootstrap не использую. Про графическое представление списка на странице статов можешь не думать. Лучше сделай комментарии в коде PHP или здесь, что там происходит хотя бы в основной логике алгоритма.

rewenas | Как сделать вывод статистики общего коли . 18



rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 16:21

1 Создать в engine/data/ конфигурационный файл country-configuration.php с массивом ключей, представляющими коды стран и их значения.

  "Андорра", 'AE' => "Объединенные Арабские Эмираты", 'AF' => "Афганистан", // Здесь надо добавить все оставшиеся 245 стран из нужных 249. Их очень много и добавлять очень долго, я не стал 'ZW' => "Зимбабве", ); ?> 

2 Создать через систему плагинов или просто так в engine/modules/ файл с названием country.php

  include_once ENGINE_DIR . "/data/country-configuration.php"; $tpl->load_template('users-country.tpl'); $tpl->result['users-country'] = dle_cache( "users-country_", $tpl->result['users-country'], true); if (!$tpl->result['users-country']) { $result = $db->query("SELECT land, COUNT(*) AS user_count FROM " . USERPREFIX . "_users WHERE land != '' GROUP BY land"); $country_counts = array(); while( $row = $db->get_row($result) ) { $country = $row['land']; $user_count = $row['user_count']; if (isset($iso_countries[$country])) { $country_name = $iso_countries[$country]; $tpl->set('{land>', $country_name); > else { $tpl->set('{land>', 'Код страны не найден'); > $tpl->set('{user-count>', $user_count); $tpl->compile('users-country'); > $tpl->clear(); create_cache( "users-country_", $tpl->result['users-country'], true ); > echo $tpl->result['users-country']; ?> 

3 В папке вашего шаблона создать новый users-country.tpl файл. ( Стили в нем написаны просто для примера, их необходимо перенести в свой CSS файл вашего шаблона. Можно их изменять или добавлять новые, делая оформление на ваш вкус и цвет.)

4 В шаблоне stats.tpl вставить строку подключения {include file=»/engine/modules/country.php»>

rewenas | Как сделать вывод статистики общего коли . 18



rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 01:51

Не знаю насколько конечно это правильно, но я вижу это в голове у себе немного по другому. Завтра постараюсь реализовать

Sinoid | Как сделать вывод статистики общего коли . 18



Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 01:11

rewenas, Понятно, что в статистику нет смысла выводить страны, которые никто не выбрал. Но ожидаю, что за несколько месяцев работы моего глобального научного сайта наберутся юзеры из около 60-80 стран. Всё равно много переменных выводить нужно. Допустим, внутри PHP считаем и формируем теги только тех стран zz, где > 0, заносим их в массив, сортируем по убыванию, а на страницу статистики выдаём список рейтинга из пар zz: . Как это всё реализовать в PHP?

rewenas | Как сделать вывод статистики общего коли . 18



rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 00:32

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

rewenas | Как сделать вывод статистики общего коли . 18



rewenas
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
Вчера, 00:30

Sinoid | Как сделать вывод статистики общего коли . 18



Sinoid
Как сделать вывод статистики общего количества пользователей по каждому значению доп. поля?
18-11-2023, 21:30

rewenas, А что делать? Есть какое-то другое решение. Ну и что, это лишь временные переменные в виде тегов.

• Sign In with Apple для DLE 14 2
• Модуль парсер ссылки с донора и з… 0
• Модификация аватарок DLE 16.1 27
• Модуль — Парсер статей и интеграц… 0
• Добавить поддержку для … 4
• Как обрезать название статьи 1
• Скрипт автозаполнения полей 3
• Парсер/граббер или конвертация БД 1
• Добавление дополнительного функци… 1
• Реализовать адекватную загрузку а… 4
• Запоминание открытой вкладки и со… 0
• Авторизация пользователей через Т… 0
• GeoIP — показ информации в зависи… 0
• Push-уведомление через OneSignal.… 0
• Giphy for comments (TinyMCE) 4
• Множественные опросы — модуль Mul… 0
• Расширенные закладки 0
• Расширение возможностей аккаунта … 0
• ChatGPT Driver 2
• Country Filter 0

Как создать эффект наложения с помощью CSS

Есть несколько способов создания наложений. В этой статье мы покажем, как создать наложение с помощью CSS свойств.

Один из способов создания такого эффекта является абсолютное позиционирование HTML элемента на странице. Необходимо в разметке создать div, потом абсолютно позиционировать его с помощью свойства position, и дальше с помощью свойства z-index задать для div высокий z-index, чтобы он находился поверх всех остальных элементов страницы. Мы зададим более высокий z-index для следующего элемента div, которое откроется сверху наложения.

• Создайте два элемента div с классами «overlay» и «modal».
• Добавьте стиль к классу «overlay».

Для position задайте значение absolute, а z-index установите в 10.

div >div> div >div> .overlay< position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; >

• Добавьте стиль к «modal».

Здесь мы устанавливаем свойство position в fixed а z-index в 11, на 1px выше, чем слой наложения.

.modal < width: 300px; height: 200px; line-height: 200px; position: fixed; top: 40%; left: 50%; margin-top: -100px; margin-left: -150px; background-color: #8ebf42; border-radius: 40px; text-align: center; z-index: 11; >

• Also, set style the body.

Мы устанавливаем position в значение relative.

body< position: relative; padding: 20px; margin:0; min-height:100%; font-family: 'Open Sans', sans-serif; background: #8ebf42; color: #eeeeee; >

И так, мы создали наложение. Давайте посмотрим результат!

Пример

html> html> head> title>overlay div title> style> body< position: relative; padding: 20px; margin:0; min-height:100%; font-family: 'Open Sans', sans-serif; background: #8ebf42; color: #eeeeee; > .overlay < position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.6); > .modal < width: 300px; height: 200px; line-height: 200px; position: fixed; top: 40%; left: 50%; margin-top: -100px; margin-left: -150px; background-color: #8ebf42; border-radius: 40px; text-align: center; z-index: 11; > style> head> body> h2>Создание наложения с абсолютно позиционированным элементом h2> div class="overlay"> div> div class="modal">Lorem Ipsum - это текст-"рыба" div> div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> body> html>

Мы также можем создать наложение при помощи селекторов ::before и ::after.

Стили и решения этого метода во многом похожи на предыдущий. Только здесь необходимо добавить стиль к псевдоклассам ::before и ::after .

Пример

html> html> head> title>overlay div title> style> body< position: relative; padding: 20px; margin:0; min-height:100%; font-family: 'Open Sans', sans-serif; background: #8ebf42; color: #eeeeee; > body :after < content: ""; display: block; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background-color: rgba(0,0,0,0.3); > .modal < width: 300px; height: 200px; line-height: 200px; position: fixed; top: 40%; left: 50%; margin-top: -100px; margin-left: -150px; background-color: #8ebf42; border-radius: 40px; text-align: center; z-index: 11; > style> head> body> h2>Создание наложения с абсолютно позиционированным элементом h2> div class="modal">Lorem Ipsum - это текст-"рыба" div> div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> body> html>

Но использование псевдокласса не поддерживается в Safari и Safari Mobile.

4 причины, по которым ваш z-index CSS не работает (и как это исправить)

От автора: Z-index — это свойство CSS, которое позволяет размещать элементы в слоях друг над другом. Это супер полезно, и, честно говоря, очень важно знать, как использовать в CSS этот инструмент. К сожалению, z-index является одним из тех свойств, которые не всегда ведут себя интуитивно. Сначала это кажется простым — более высокий номер z-индекса означает, что элемент будет поверх элементов с более низкими номерами z-index.

Но есть некоторые дополнительные правила, которые усложняют ситуацию. И вы не всегда можете исправить положение, установив z-index 999999! В этой статье подробно объясняются четыре наиболее распространенных причины, по которым z-index CSS не работает, и как именно вы можете это исправить.

Мы рассмотрим некоторые примеры кода. Прочитав эту статью, вы сможете избегать этих распространенных ошибок с z-index! Давайте рассмотрим первую причину, по которой не срабатывает свойство:

1. Элементы в том же контексте стека будут отображаться в порядке их указания, причем последние элементы будут располагаться поверх предыдущих

В первом примере у нас есть относительно простой макет, который включает в себя 3 основных элемента:

Белый блок с текстом

Еще одно изображение того же кота

< div class = "content__block" >Meow meow meow . . . < / div >

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

Тем не менее, это выглядит так:

Первый кот действительно расположен под белым блоком контента, как мы и хотим. Но второе изображение кота расположено поверх текста!

Почему это происходит? Причиной такого поведения является естественный порядок размещения на веб-странице. Эти рекомендации определяют, какие элементы будут сверху, а какие снизу. Даже если для элементов не установлен z-индекс, есть и причина, по которой они будут размещаться поверх друг друга.

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

В нашем примере с кошками и белым блоком они подчиняются этому правилу. Вот почему первый кот находится под элементом белого блока, а белый блок под вторым котом.

Хорошо, с порядком размещения мы разобрались, но как нам исправить CSS, чтобы второй кот находился под белым блоком? Давайте рассмотрим вторую причину:

2. Для элемента не задана позиция

Одно из указаний, определяющих порядок наложения, заключается в том, установлена ли позиция для элемента или нет. Чтобы установить позицию для элемента, добавьте свойство CSS position с каким-либо значением, кроме static, например, relative или absolute.

Согласно этому правилу позиционируемые элементы будут отображаться поверх непозиционированных элементов. Таким образом, установив для белого блока position: relative, и оставив два элемента котов не позиционированными, вы поместите белый блок поверх котов в порядке расположения. Вот как это будет выглядеть — вы также можете поэкспериментировать с Codepen выше.



Юху! Теперь, следующее, что мы хотим сделать, это повернуть нижнюю кошку вверх ногами, используя свойство transform. Таким образом, обе кошки окажутся под белым блоком, с торчащими из-под него головами. Но это может вызвать еще большую путаницу с z-index. Мы рассмотрим проблему и решение в следующей части.

3. Установка некоторых свойств CSS, таких как opacity или transform, помещает элемент в новый контекст стека

Как мы только что упомянули, мы хотим перевернуть нижнюю кошку вверх ногами. Для этого мы добавим transform: rotate(180deg).

Похожие публикации:
1. Как добавлять css в html
2. Как отправить аудиофайл в whatsapp
3. Сколько стоит машина volkswagen polo
4. Что такое main в html