Как поднять блок в css
Перейти к содержимому

Как поднять блок в css

  • автор:

Z-index в CSS: создание слоев и особенности работы

Наши мониторы — это двумерные плоские поверхности с кучей пикселей. Но в вебе есть и третье измерение. Например, каждый из нас видел, как модальное окно всплывает «над» остальным контентом на первый план.

Представьте, что экран — это портал в трехмерный мир браузера. Визуализируем это пространство как комнату. Дальняя от нас стена называется «холст» (canvas).

Самые близкие к холсту пиксели (самые удаленные от нас) браузер рисует первыми. Каждый новый слой отображается поверх уже окрашенного.

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

На первый взгляд, z-index — это очень простое свойство: чем он больше, тем ближе слой к пользователю. Однако в его реализации есть несколько нюансов, которые вызывают много путаницы.

Прежде всего, индекс будет работать только на спозиционированном элементе (свойство position отличается от static ). Для элемента, находящегося в обычном потоке, эффекта не будет.

Введение в контекст наложения

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

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

Создать новый контекст можно несколькими способами:

  • установить абсолютное или относительное позиционирование, а также любой z-index кроме auto ;
  • установить фиксированное позиционирование ( fixed или sticky );
  • установить прозрачность меньше 1;
  • использовать свойства transform или will-change .

Полный список способов создания контекстов можно найти на MDN.

Рассмотрим три HTML-дерева. Нижняя часть — это корневой узел, а потомки уложены сверху. Предположим, что все три корня находятся прямо внутри body .

Это будет выглядеть примерно так:

See the Pen by Benjamin Johnson (@benjaminj6) on CodePen.

Прежде всего, почему blue-child-2 находится внизу? Ведь его z-index равен миллиону, он должен самым верхним, не так ли?

Почему green-child-1 наверху, хотя его z-index всего 2? Разве больший индекс не должен перекрывать меньший?

Начнем с green-child-1 . Его родитель — green-parent — имеет z-index: 999 , поэтому мы предполагаем, что он поднимется на самый верх. Но z-index не влияет на элементы с position: static . Это означает, что green-child-1 является частью корневого контекста наложения, в котором, кроме него, есть еще red-parent и blue-parent . Он имеет более высокий z-index , чем они, поэтому находится выше.

Красный и синий корневые блоки создают собственные локальные контексты наложения. Почему blue-child-2 находится ниже, чем red-parent , несмотря на больший z-index ? Дело в том, что это свойство управляет положением слоя только в локальном контексте. blue-child-2 , безусловно, будет выше всех дочерних элементов blue-parent . Но контекст red-parent выше, чем контекст blue-parent , поэтому все красные потомки всегда будут выше синих.

Чтобы поднять blue-child-2 выше red-parent придется изменить структуру HTML и извлечь его из локального контекста наложения в корневой (или в другой локальный, который будет выше красного). Но помните, что такие изменения в больших проектах могут привести к непредвиденным последствиям.

Многие библиотеки компонентов используют интерфейс с большим количеством слоев (всплывающие подсказки, модальные окна), добавляя их к тегу body , а не внутрь самого компонента. Это позволяет обойти подводные камни стека наложения и гарантирует, что нужные элементы всегда будут на самом верху.

Вывод

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

  1. z-index работает только на позиционированных элементах;
  2. z-index работает внутри текущего контекста наложения.

Зная об этих тонкостях вы легко сможете создавать грамотные многоуровневые интерфейсы.

Как поднять контент выше к краю блока?

s_1475902155_8391349_bce8f1837b.jpg

Как поднять контент выше? Помогите пожалуйста! Какой параметр в css отвечает за это?

Ответы на пост (5) Написать ответ
08.10.2016 08:37

Если не хотите показывать сайт, открывайте его в хроме и через правую кнопку мыши смотрите код. За этот отступ отвечают параметры margin и(или) padding. В вашем случае нужно смотреть, может у вас какой блок сполз, потому что таких косяков трудно наделать отступами.

08.10.2016 08:54

cms хоть какой.
Во накосячил товарищ.
Что стесняться-то, всяко быват. Давай уж ссыль, вторая тема уже, заинтриговал. Здесь только «врачи», нам можно. Смотрим firebag и правим.
Возможно (если Джумла! 3) — в настройках шаблона поставил «косяк» (или уже был прописан в квик-старте). Там есть (у ряда шаблонов, ДжумлаАрт) установка отступов блоков. Эт css-правкой неличимо, нужно править из админки.

Давай уж ссыль. Всяко быват.

08.10.2016 09:02

Параметр: margin(top)/padding(top)/top данного элемента или же margin(bottom)/padding(bottom)/bottom верхнего элемента

08.10.2016 09:52

В Firefox правой кнопкой кликнуть по нужному блоку или элементу и выбрать «свойства элемента». Внизу выскочит меню со свойствами css, а отступы подсветятся на на веб-странице желтым и фиолетовым. Желтый — свойство margin, фиолетовым — свойство padding. Кликните по цифровым значениям этих свойств в менюшке справа внизу, попробуйте поменять цифры, посмотрите, что получилось. Но эти изменения не повлияют на сайт, а только на отображаемую в браузере страницу. То есть если вас устроит результат, потом внесите соответствующие изменения в код файла css на вашем сайте.

Поднять блок вверх

введите сюда описание изображения

Здравствуйте! Хочу поднять блок с картинками выше, но когда задаю слишком большой margin-top то второй ряд просто начинает наезжать сверху на первый и съезжается в один ряд. Мне необходимо поднять одинаково 2 ряда вверх. Страница

0) < $resquery = mysql_fetch_array($seoquery); >If ($id != $_SESSION['countid']) < $querycount = mysql_query("SELECT count FROM table_products WHERE products_id='$id'",$link); $resultcount = mysql_fetch_array($querycount); $newcount = $resultcount["count"] + 1; $update = mysql_query ("UPDATE table_products SET count='$newcount' WHERE products_id='$id'",$link); >$_SESSION['countid'] = $id; ?>
0) < $row1 = mysql_fetch_array($result1); do < if (strlen($row1["image"]) >0 && file_exists("./uploads_images/".$row1["image"])) < $img_path = './uploads_images/'.$row1["image"]; $max_width = 300; $max_height = 300; list($width, $height) = getimagesize($img_path); $ratioh = $max_height/$height; $ratiow = $max_width/$width; $ratio = min($ratioh, $ratiow); $width = intval($ratio*$width); $height = intval($ratio*$height); >else < $img_path = "/images/no-image.png"; $width = 110; $height = 200; >echo '
[email protected]?v=1509391637">
[email protected]?v=1509391637">

'.$row1["title"].'

Regular price'.group_numerals($row1["price"]).' грнSale

Описание товара

Просто лучший свитшот!

'.$row1["title"].'

Regular price'.group_numerals($row1["price"]).' грнSale

Описание товара

Просто лучший свитшот!
'; > while ($row1 = mysql_fetch_array($result1)); $result = mysql_query("SELECT * FROM uploads_images WHERE products_id='$id'",$link); If (mysql_num_rows($result) > 0) < $row = mysql_fetch_array($result); echo '

Доп. фото

'; do < $img_path = './uploads_images/'.$row["image"]; $max_width = 70; $max_height = 70; list($width, $height) = getimagesize($img_path); $ratioh = $max_height/$height; $ratiow = $max_width/$width; $ratio = min($ratioh, $ratiow); $width = intval($ratio*$width); $height = intval($ratio*$height); echo '
'; > while ($row = mysql_fetch_array($result)); > $result = mysql_query("SELECT * FROM table_products WHERE products_id='$id' AND visible='1'",$link); $row = mysql_fetch_array($result); $query_reviews = mysql_query("SELECT * FROM table_reviews WHERE products_id='$id' AND moderat='1' ORDER BY reviews_id DESC",$link); If (mysql_num_rows($query_reviews) > 0) < $row_reviews = mysql_fetch_array($query_reviews); do < >while ($row_reviews = mysql_fetch_array($query_reviews)); > else < >> ?>

Стили (сюда не вместилось) ТЫК

Как поднять блок выше?

5c61bbcd7f5e9552030506.png

https://codepen.io/anon/pen/MLGveE
Подскажите, как block1 поднять выше по z-index?
При этом они должны быть адаптивны
должно быть так

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

4 комментария

Простой 4 комментария

aliencash

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *