Z-index: наслаивание элементов

Что дальше?

Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.

Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь! Это, безусловно, самая сложная вещь из тех, что мы до сих пор  изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной. Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.

Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.

• Обзор: Building blocks
• Далее

CSS Presentation Levels (Уровни Показа в CSS)

Presentation Levels
представляет способ, чтобы сделать шаг вперед и назад через
несколько визуализаций того же документа, что особенно полезно для
презентаций в виде слайд-шоу (выделить элементы списка по одному за
раз) и контурных просмотров (показать более-менее подробно). Каждый
элемент имеет уровень презентации и три стиля (три положения): один
для того, когда браузер находится на более низком презентационном
уровне, один для точного соответствия и один для того, когда
презентационный уровень браузера выше, чем у элемента. Браузер
должен предлагать пользователю простой способ для увеличения и
уменьшения уровня браузера.

Конфликтующие правила

CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово «каскадные» является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.

В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. Каскад и тесно связанная концепция специфичности — это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.

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

Давайте начнём с краткого обзора ключевых моментов, которых мы касаемся, далее рассмотрим каждый из них по очереди и посмотрим, как они взаимодействуют друг с другом и с вашим CSS. Это может показаться набором сложных для понимания понятий. Однако, когда вы получите больше опыта в написании CSS, для вас станет более очевидным то, как это работает.

Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.

В приведённом ниже примере у нас есть два правила, которые могут применяться к h1. В результате h1 окрасится синим цветом — эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.

Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов , селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:

• Селектор элементов ( например ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.

• Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили.

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

Позже мы объясним, как сделать оценку специфичности, и прочие детали.

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

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

Некоторые свойства не наследуются — например, если вы установили для элемента равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!

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

Пример кода Z-index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo {
position:absolute;
font-family:Century;
font-size:2em;
font-weight:bold;
z-index:20;
}
#logo1 {
left:50px;
top:50px;
color:#00f;
}
#logo2 {
left:52px;
top:52px;
color:#f00;
z-index:10;
}
.box {
position:absolute;
height:100px;
width:100px;
border:15px solid #000;
}
#box1 {
left:150px;
top:150px;
border-color:#f00;
z-index:40;
}
#box2 {
left:185px;
top:185px;
border-color:#00f;
z-index:30;
}
#box3 {
left:185px;
top:150px;
border-color:#060;
z-index:20;
}
#box4 {
left:150px;
top:185px;
border-color:#f60;
z-index:10;
}
</style>
<title>CSS Z-Index</title>
</head>
<body>
<h1>CSS Z-Index</h1>
<div id="logo1" class="logo">Webucator</div>
<div id="logo2" class="logo">Webucator</div>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
</body>
</html>

Обратите внимание, как определенные элементы div расположены поверх других. Если z-index этих элементов изменяется, расположение их стека изменится также

Примечания к SVG 2

Спецификация SVG 2 — это следующий крупный выпуск, который по-прежнему поддерживает вышеуказанные функции.

• Поддержка SVG 2 Mozilla — Рисование
• Как узнать, поддерживает ли мой браузер svg 2.0
• Могу ли я использовать SVG

• 1 Есть также старый черновик о переопределении порядка рендеринга, но эта функция недоступна. Проект ссылки
• 14 лет! не всегда легко нарисовать элементы в том порядке, в котором вы хотите, чтобы они были нарисованы, особенно если объекты создаются программно и могут казаться вложенными (например, грамм не может содержать a, b, так что a ниже g, брат c, но b выше него)
• @Michael: В вашем сценарии сначала я попытаюсь понять, действительно ли элементы должны быть сгруппированы.
• 1 Это ‘use xlink: href’ круто, странно и идеально подходит для того, что мне нужно !!

Попробуйте инвертировать <?php а также . Взгляните на эту скрипку: http://jsfiddle.net/hu2pk/3/

В SVG z-index определяется порядком появления элемента в документе. Вы также можете взглянуть на эту страницу, если хотите: https://stackoverflow.com/a/482147/1932751

• 1 Спасибо, но мне нужен элемент, основанный на значении z-индекса.
• ОК. И вы хотите, чтобы # один был на # два или наоборот?
• да, если я сказал значение z-index как -1 для #one, значит, он будет отображаться на верхнем уровне.
• 13 Ни в одной из спецификаций SVG нет свойства z-index. Единственный способ определить, какие элементы появляются сверху, а какие снизу, — это использовать упорядочение DOM.
• 9 И тогда вы можете сказать через stackoverflow.com/questions/14167863/…

Как говорили здесь другие, z-index определяется порядком, в котором элемент появляется в DOM. Если переупорядочение HTML вручную невозможно или затруднительно, вы можете использовать D3 для изменения порядка групп / объектов SVG.

Обновить

Если у вас есть вложенный SVG, содержащий группы, вам нужно вывести элемент из его parentNode.

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

• привет, это сработало для меня, но каков будет эквивалент «довести до дна»? Благодарность
• Элементы @gavin SVG отрисовываются в порядке сверху вниз. Чтобы поместить элемент сверху, мы добавляем () его так, чтобы он был последним элементом. И наоборот, если мы хотим, чтобы элемент отправлялся вниз, мы помещаем его первым элементом с помощью prepend (). функция принестиToBottomofSVG (targetElement) {let parent = targetElement.ownerSVGElement; parent.prepend (targetElement); }

Использование D3:

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

5 selection.raise() является новым в D3 начиная с v4.

Для svgs нет z-индекса. Но svg определяет, какие из ваших элементов являются самыми верхними по их положению в DOM. Таким образом, вы можете удалить объект и поместить его в конец svg, сделав его «последним отрисованным» элементом. Затем он визуально отображается «наверху».

Используя jQuery:

Применение:

Используя D3.js:

Применение:

Использование D3:

Если вы хотите добавить элемент в обратном порядке к использованию данных:

Вместо .append

Добавление элемента поверх элемента группы

Другим решением было бы использовать div, которые используют zIndex для хранения элементов SVG. Как здесь: https://stackoverflow.com/a/28904640/4552494

Мы уже 2019 а также по-прежнему не поддерживается в SVG.

Вы можете увидеть на сайте Поддержка SVG2 в Mozilla что государство для ��� Не реализованы.

Вы также можете посмотреть на сайте Ошибка 360148 «Поддержка свойства z-index в элементах SVG» (Сообщено: 12 лет назад).

Но у вас есть 3 возможности установить его в SVG:

1. С участием
2. С участием
3. С участием (Нет поддержки SVG в IE)

3.1 Introduction

Implementations of SVG are expected to behave as though they
implement a rendering (or imaging) model corresponding to the
one described in this chapter. A real implementation is not
required to implement the model in this way, but the result on
any device supported by the implementation shall match that
described by this model.

The appendix on conformance
requirements describes the extent to which an actual
implementation may deviate from this description. In practice
an actual implementation will deviate slightly because of
limitations of the output device (e.g. only a limited range of
colors might be supported) and because of practical limitations
in implementing a precise mathematical model (e.g. for
realistic performance curves are approximated by straight
lines, the approximation need only be sufficiently precise to
match the conformance requirements).

Интерактивный демонстрационный пример

При этом 3 функции.

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

Target: это элемент, для которого нам нужно вывести его наверх svg: это контейнер элементов

это легко сделать:

1. клон ваши предметы
2. Сортировать клонированные предметы
3. заменить предметы клонированы

Перемещение вперед с помощью преобразования: TranslateZ

Предупреждение: работает только в FireFox

• Мне здесь не работать. Оранжевый покрывает зеленый.
• @krave: Какой браузер?
• Последняя версия Chrome
• @krave: Ты прав. Работает только в FireFox. я прошу прощения

CSS Object Model (CSSOM) (Объектная модель в CSS)

DOM определяет функции, для управления HTML, XML и CSS
документами, эти функции находятся в нескольких программных
библиотеках (и браузерах). Программисты могут вызвать их из своих
программ , а не писать свои собственные. Некоторые из этих функций
взаимодействуют с правилами добавления и удаления и свойствами
изменения в таблицах стилей CSS. Эти APIs (Интерфейсы
программирования приложений операционных систем) формируют CSS Object Model или CSS-OM. Они полезные для
автономных программ, а также для скриптов и приложений. 2-й уровень
DOM содержит два раздела посвященные CSS-OM (CSS Object Model) и
CSS WG будет развивать 3-ий уровень CSS-OM.

Обзор

Это изображение иллюстрирует разницу между растровыми и векторными изображениями. Растровое изображение состоит из фиксированного набора пикселей, а векторное изображение состоит из фиксированного набора фигур. На рисунке масштабирование растрового изображения показывает пиксели, а масштабирование векторного изображения сохраняет формы.

SVG находится в разработке в рамках Консорциума World Wide Web (W3C) с 1999 г. после того, как в 1998 г. консорциуму было представлено шесть конкурирующих предложений по языкам векторной графики. Первая рабочая группа по SVG решила не разрабатывать какие-либо коммерческие предложения, а создать новый язык разметки, основанный на них, но не основанный ни на одном из них.

SVG допускает три типа графических объектов: векторные графические фигуры, такие как контуры и контуры, состоящие из прямых линий и кривых, растровые изображения и текст. Графические объекты могут быть сгруппированы, стилизованы, преобразованы и объединены в ранее визуализированные объекты. Набор функций включает вложенные преобразования , контуры обрезки , альфа-маски , эффекты фильтров и объекты шаблонов. Рисунки SVG могут быть интерактивными и включать анимацию , определенную в элементах SVG XML или с помощью сценариев, которые обращаются к объектной модели документа SVG (DOM). SVG использует CSS для стилизации и JavaScript для написания скриптов. Текст, включая интернационализацию и локализацию , отображаемый в виде обычного текста в SVG DOM, повышает SVG-графики.

Спецификация SVG была обновлена ​​до версии 1.1 в 2011 году. Существует два «мобильных профиля SVG», SVG Tiny и SVG Basic, предназначенные для мобильных устройств с ограниченными вычислительными возможностями и возможностями отображения. Масштабируемая векторная графика 2 стала 15 сентября 2016 года. SVG 2 включает несколько новых функций в дополнение к SVG 1.1 и SVG Tiny 1.2.

Печать

Хотя спецификация SVG в первую очередь ориентирована на язык разметки векторной графики , ее дизайн включает в себя основные возможности языка описания страниц, такого как Adobe PDF . Он содержит условия для богатой графики и совместим с CSS для стилизации. SVG содержит информацию, необходимую для размещения каждого глифа и изображения в выбранном месте на печатной странице.

Скрипты и анимация

Рисунки SVG могут быть динамическими и интерактивными. Основанные на времени модификации элементов могут быть описаны в SMIL или могут быть запрограммированы на языке сценариев (например, JavaScript ). W3C явно рекомендует SMIL в качестве стандарта анимации в SVG.

Богатый набор обработчиков событий, таких как onmouseover и onclick, может быть назначен любому графическому объекту SVG для применения действий и событий.

Сжатие

Изображения SVG, будучи XML, содержат множество повторяющихся фрагментов текста, поэтому они хорошо подходят для алгоритмов . Когда изображение SVG было сжато с помощью алгоритма gzip , оно называется изображением «SVGZ» и использует соответствующее расширение имени файла. Программы просмотра, соответствующие стандарту SVG 1.1, будут отображать сжатые изображения. Файл SVGZ обычно составляет от 20 до 50 процентов от исходного размера. W3C предоставляет файлы SVGZ для проверки на соответствие.

Примеры

Вы можете складывать по ID

С крайним левым SVG сверху

Наименьшие радиусы сверху

Или укажите массив для применения z-индекса для определенного порядка — в моем примере кода массив &lsqb;3,4,1,2,5&rsqb; перемещает / меняет порядок 3-го круга (в исходном порядке HTML), чтобы он был 1-м в DOM, 4-м — 2-м, 1-м — 3-м и т. д.

• Определенно лучший ответ здесь … 10/10. Почему сейчас это принято?
• 2 @Tigerrrrrr Импортировать внешнюю библиотеку, чтобы делать что-то столь же простое, как управление порядком наложения, — безумие. Что еще хуже, D3 — особенно большая библиотека.
• 3 @iMe, хорошо сказано. Пока это а решение проблемы, сделав ее достойной быть здесь; это не так и не должно быть, то ответ. Единственное, что должно когда-либо заменить текущий ответ, — это если выйдет более новая спецификация и изменятся браузеры. Любой, кто хочет использовать этот ответ, не импортируйте все D3, просто импортируйте необходимые модули. НЕ ИМПОРТИРУЙТЕ ВСЕ D3 только для этого.

Вы можете использовать use.

Сверху появится зеленый кружок.jsFiddle

• 4 Рисует ли #one дважды?
• @mareoraft Да, рисуется дважды. Но при желании вы можете скрыть первый экземпляр через CSS. имеет тот же эффект, что и клонирование указанного элемента DOM
• +1, потому что ему не нужен javascript, а -1, потому что вы также можете изменить порядок при изменении DOM перед загрузкой в ​​любом случае.

Как уже говорилось, svgs отображаются по порядку и не учитывают z-index (пока). Возможно, просто отправьте конкретный элемент в конец своего родителя, чтобы он отображался последним.

Работал у меня.

Контекст размещения

Допустим, у нас есть вот такой html-код с позиционированными элементами.

Будет ли элемент размещен над элементом , из-за более высокого ? Ответ — нет. Сначала это может показаться странным, но все сводится к тому, как сгруппированы html-элементы.

Обратите внимание, что — это отдельный элемент, и он образует группу из единственного элемента. образует группу с (родитель) и (дочерний элемент)

Позиционированный элемент формирует контекст наложения. Позиционируемый элемент может быть либо одиночным элементом (или) родительским элементом с дочерними элементами.

Вот ключевая часть — дочернего элемента действует внутри своей группы. определяет его позицию в порядке наложения только среди своих братьев и сестер и не имеет никакого эффекта за пределами своей группы. Поэтому установка даже большого значения, например, 99999 для , не помещает его перед .

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

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

• Позиционированные элементы с отрицательными значениями
• Непозиционированные элементы — со значением
• Позиционированные элементы с неустановленным значением или
• Позиционированные элементы с положительными значениями

Посмотрите ниже, здесь несколько элементов и контекстов наложения

Обратите внимание, что , и дочерние элементы по отношению к

See this code position: absolute playground on x.xhtml.ru.

Пример для c использованием и для залипания элементов по середине.

See this code CSS Position:Sticky; with top:0; and bottom:0; on x.xhtml.ru.

3.6 Types of graphics elements

SVG supports three fundamental types of
that can be rendered onto the canvas:

• , which
  represent some combination of straight line and curves
• Text, which represents some combination of character
  glyphs
• Raster images, which represent an array of values that
  specify the paint color and opacity (often termed alpha) at a
  series of points on a rectangular grid. (SVG requires support
  for specified raster image formats under conformance requirements.)

3.6.1 Painting shapes and text

Shapes and text can be (i.e., apply paint to the
interior of the shape) and (i.e., apply paint
along the outline of the shape). A stroke operation is centered
on the outline of the object; thus, in effect, half of the
paint falls on the interior of the shape and half of the paint
falls outside of the shape.

For certain types of shapes, (which
themselves can consist of any combination of shapes, text and
images) can be drawn at selected vertices. Each marker symbol
is painted as if its graphical content were expanded into the
SVG document tree just after the shape object which is using
the given marker symbol. The graphical contents of a marker
symbol are rendered using the same methods as graphics
elements. Marker symbols are not applicable to text.

The fill is painted first, then the stroke, and then the
marker symbols. The marker symbols are rendered in order along
the outline of the shape, from the start of the shape to the
end of the shape.

Each fill and stroke operation has its own opacity settings;
thus, you can fill and/or stroke a shape with a
semi-transparently drawn solid color, with different opacity
values for the fill and stroke operations.

The fill and stroke operations are entirely independent
painting operations; thus, if you both fill and stroke a shape,
half of the stroke will be painted on top of part of the
fill.

SVG supports the following built-in types of paint which can
be used in fill and stroke operations:

• (linear
  and radial)

3.6.2 Painting raster images

When a raster image is rendered, the original samples are
«resampled» using standard algorithms to produce samples at the
positions required on the output device. Resampling
requirements are discussed under conformance requirements.

CSS Reader Media Type (Считыватель медиа в CSS)

Этот модуль был запущен в марте 2008 года. Ключевое
слово ‘reader’ (считыватель) — медиа тип для использования в Media
Queries (Медиа Запросах) (похожий на ‘screen’ (экран), ‘print’
(печать), ‘projection’ (проекция), и т.д.). Устройства, которые
могут применять по своему усмотрению правила внутри ‘@ media
reader’ — это устройства, которые похожи на экранные считыватели,
что отображают страницы на экране и одновременно озвучивают их, или
же отображают страницу и одновременно передают ее на динамическое
устройство Брайля. Свойства, что применяются к этому медиа типу
являются сочетанием свойств экрана, речи и Брайля.

Понимание наследования

Итак, наследование. В примере ниже мы имеем с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего стиль границы, внутренние отступы и цвет шрифта.

Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку  и к элементам внутри первого вложенного списка. Далее мы добавили класс  ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.

Такие свойства, как ширина (как в примере выше), внутренние и внешние отступы и стиль границы не наследуются. Если бы потомки нашего списка наследовали бы границу, то каждый отдельный список и каждая позиция в списке получили бы такую же границу — вряд ли мы хотели бы получить такой эффект!

Какие свойства наследуются по умолчанию, а какие нет, чаще всего определяется здравым смыслом.

CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.

Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это «включает наследование».

Устанавливает значение свойства, применённого к выбранному элементу, равным initial value этого свойства (в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)

(en-US)

Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как , иначе оно действует как .

Примечание: Существует также более новое значение , которое имеет ограниченную поддержку браузерами.

Примечание: Смотрите в для более подробной информации о каждом из них, и о том, как они работают.

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

Например:

1. Второй элемент списка имеет класс . Таким образом, цвет для следующего вложенного элемента устанавливается по наследству. Как изменится цвет, если это правило будет удалено?
2. Понятно ли, почему третий и четвёртый элементы имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.
3. Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента  — например: ?

Стенографическое свойство CSS можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырёх значений (, , , или ). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.

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

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