Position свойство css: Разметка и содержащий блок — CSS

Leave a Comment / Css / By /

Вычисленное значение — CSS | MDN

Вычисленное значение CSS-свойства вычисляется из указанного значения посредством:

  • Обработки специальных значений inherit и initial, а также
  • Выполнения вычислений необходимых для получения значения, описанного в строке «Обработка значения» в описании свойства.

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

Например, если у элемента указаны значения font-size: 16px и padding-top: 2em, то вычисленное значение padding-top будет 32px (двойной размер шрифта).

Однако, для некоторых свойств (таких, где проценты относительны к чему-то, что может потребовать лэйаут определять(переопределить) границы, например, width, margin-right

, text-indent и top), процентно указанные значения преобразуются в процентно вычисляемые значения. Кроме того, безразмерные числа, указанные в свойстве line-height становятся вычисленными значениями. Эти относительные единицы, которые остались в вычисленных значениях, становятся абсолютными, когда используемое значение (en-US) установлено.

Основная сфера применения** вычисленного значения** (кроме как использования его как «шага» между указанным и используемым значением) является наследование, включая ключевое слово inherit.

DOM API getComputedStyle() возвращает решённое значение, которое может быть либо вычисляемым или используемым значением, в зависимости от свойства.

СпецификацияСтатусКомментарий
CSS Level 2 (Revision 1)
Определение ‘computed value’ в этой спецификации.		РекомендацияИзначальное определение

  • Руководство по CSS
  • Ключевые концепции CSS
    • Синтаксис CSS
    • @-правила
    • комментарии
    • специфичность
    • наследование
    • блочная модель
    • режимы компоновки
    • модели визуального форматирования
    • Схлопывание отступов
    • Значения
      • начальные
      • вычисленные
      • используемые
      • действительные
    • Синтаксис определения значений (en-US)
    • Сокращённые свойства
    • Замещаемые элементы

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Контекст наложения (stacking context) — CSS

Контекст наложения (stacking context) это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML-элементы занимают это место по порядку, основанному на атрибутах элемента.

« CSS « Understanding CSS z-index (en-US)

В предыдущем примере Добавляем z-index (en-US), порядок отображения определённых DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( stacking context ).

Контекст может формироваться в любом месте документа, любым элементом, у которого выполняется одно из следующих условий:

  • является корневым элементом (HTML),
  • позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от «auto»,
  • flex элемент с z-index отличным от «auto», чей родительский элемент имеет свойство display: flex|inline-flex,
  • элементы с opacity меньше чем 1. (См. the specification for opacity),
  • элементы с transform отличным от «none»,
  • элементы с mix-blend-mode значением отличным от «normal»,
  • элементы с filter значением отличным от «none»,
  • элементы с isolation установленным в «isolate»,
  • position: fixed
  • если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения (См. this post)
  • элементы с -webkit-overflow-scrolling (en-US) установленным в «touch»

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

Суммируем:

  • Позиционирование и присваивание HTML-элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).
  • Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения.
  • Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.

Примечание: Иерархия контекстов наложения является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.

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

  • Root
    • DIV #1
    • DIV #2
    • DIV #3
      • DIV #4
      • DIV #5
      • DIV #6

Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling’s DIV.

Примечание:

  • DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контакта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому, DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .
    DIV #1).
  • По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).
  • У DIV #3 есть свойство z-index 4, но это значение независимо от z-index’ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.
  • An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a «version number» of sorts, where child elements are minor version numbers underneath their parent’s major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order):
    • Root
      • DIV #2 — z-index is 2
      • DIV #3 — z-index is 4
        • DIV #5 — z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4. 1
        • DIV #6 — z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3
        • DIV #4 — z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6
      • DIV #1 — z-index is 5
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en">
  <head>
    <title>Understanding CSS z-index: The Stacking Context: Example Source</title>
    <style type="text/css">
      * {
        margin: 0;
        }
      html {
        padding: 20px;
        font: 12px/20px Arial, sans-serif;
        }
      div {
        opacity: 0.7;
        position: relative;
        }
      h2 {
        font: inherit;
        font-weight: bold;
        }
      #div1, #div2 {
        border: 1px dashed #696;
        padding: 10px;
        background-color: #cfc;
        }
      #div1 {
        z-index: 5;
        margin-bottom: 190px;
        }
      #div2 {
        z-index: 2;
        }
      #div3 {
        z-index: 4;
        opacity: 1;
        position: absolute;
        top: 40px;
        left: 180px;
        width: 330px;
        border: 1px dashed #900;
        background-color: #fdd;
        padding: 40px 20px 20px;
        }
      #div4, #div5 {
        border: 1px dashed #996;
        background-color: #ffc;
        }
      #div4 {
        z-index: 6;
        margin-bottom: 15px;
        padding: 25px 10px 5px;
        }
      #div5 {
        z-index: 1;
        margin-top: 15px;
        padding: 5px 10px;
        }
      #div6 {
        z-index: 3;
        position: absolute;
        top: 20px;
        left: 180px;
        width: 150px;
        height: 125px;
        border: 1px dashed #009;
        padding-top: 125px;
        background-color: #ddf;
        text-align: center;
        }
    </style>
  </head>
  <body>
    <div>
      <h2>Division Element #1</h2>
      <code>position: relative;<br/>
      z-index: 5;</code>
    </div>
    <div>
      <h2>Division Element #2</h2>
      <code>position: relative;<br/>
      z-index: 2;</code>
    </div>
    <div>
      <div>
        <h2>Division Element #4</h2>
        <code>position: relative;<br/>
        z-index: 6;</code>
      </div>
      <h2>Division Element #3</h2>
      <code>position: absolute;<br/>
      z-index: 4;</code>
      <div>
        <h2>Division Element #5</h2>
        <code>position: relative;<br/>
        z-index: 1;</code>
      </div>
      <div>
        <h2>Division Element #6</h2>
        <code>position: absolute;<br/>
        z-index: 3;</code>
      </div>
    </div>
  </body>
</html>

Division Element #1

position: relative;
z-index: 5;

Division Element #2

position: relative;
z-index: 2;

Division Element #3

position: absolute;
z-index: 4;

Division Element #4

position: relative;
z-index: 6;

Division Element #5

position: relative;
z-index: 1;

Division Element #6

position: absolute;
z-index: 3;
  • Stacking without z-index (en-US) : Default stacking rules
  • Stacking and float (en-US) : How floating elements are handled
  • Adding z-index (en-US) : Using z-index to change default stacking
  • Stacking context example 1 (en-US) : 2-level HTML hierarchy, z-index on the last level
  • Stacking context example 2 (en-US) : 2-level HTML hierarchy, z-index on all levels
  • Stacking context example 3 (en-US) : 3-level HTML hierarchy, z-index on the second level

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Свойство кавычек CSS

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Укажите кавычки для цитат:

#a {
  кавычки: «‘» «‘»;
}

Попробуйте сами »

Определение и использование

Свойство quotes устанавливает тип кавычек для кавычек.

Показать демо ❯

Значение по умолчанию: не указано
Унаследовано: да
Анимация: нет. Читать о анимированном
Версия: CSS2
Синтаксис JavaScript: объект . style.quotes=»‘\253’ ‘\273′» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
котировки 11,0 8,0 1,5 5.1 4,0

Синтаксис CSS

кавычки: нет| строка |начальный|наследовать;

Значения свойств

Значение Описание Демо
нет Указывает, что значения «open-quote» и «close-quote» свойства «content» не будут создавать никаких кавычек Демо ❯
строка строка строка строка Указывает, какие кавычки использовать. Первые два значения определяют первый уровень встраивания котировок, следующие два значения — следующий уровень встраивания котировок и т. д. Демо ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Символы кавычек

Результат Описание Номер организации
» двойная кавычка \0022
одинарная кавычка \0027
‹ одинарный, левый угол котировки\2039
› одинарная, под прямым углом котировка\203А
« двойной, левый угол котировки \00АВ
» двойная, прямоугольная котировка \00BB
‘ левая кавычка (одиночная старшая-6)\2018
’ правая кавычка (одиночная старшая-9)\2019
» левая кавычка (двойная высокая-6)\201С
” правая кавычка (двойная высокая-9)\201D
„ двойная кавычка (двойная младшая 9)\201Е

Связанные страницы

Ссылка HTML DOM: свойство кавычек

❮ Предыдущая Полное руководство по CSS Следующий ❯


ПИКЕР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

902 64 лучших примера Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

mask-position — CSS: Каскадные таблицы стилей

Свойство CSS mask-position задает начальное положение относительно слоя положения маски, заданного параметром mask-origin , для каждого определенного изображения маски.

 /* Значения ключевых слов */
положение маски: сверху;
положение маски: снизу;
положение маски: слева;
положение маски: справа;
положение маски: центр;
/* значения <позиция> */
положение маски: 25% 75%;
позиция маски: 0px 0px;
положение маски: 10% 8em;
/* Несколько значений */
положение маски: вверху справа;
маска-позиция: 1бэр 1бэр, центр;
/* Глобальные значения */
маска-позиция: наследовать;
позиция маски: начальная;
положение маски: вернуться;
положение маски: обратный слой;
положение маски: не установлено;

Одно или несколько значений , разделенных запятыми.

Значения

<позиция>

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

Исходное значение центр
Применяется к все элементы; В SVG это относится к элементам-контейнерам, за исключением элемента и всех графических элементов
Унаследованных нет
Проценты относятся к размеру области рисования маски минус размер изображения слоя маски (см. текст для background-position )
Вычисляемое значение Состоит из двух ключевых слов, представляющих исходную точку, и двух смещений от этой исходной точки, каждое из которых задано как абсолютная длина (если задано ), иначе как процент .
Тип анимации повторяемый список простого списка длины, процента или вычисления
 mask-position = 
 # 
 "> = 
 [left | center | right] | | [сверху | по центру | снизу] | 
 [слева | по центру | справа | <процент длины>] [сверху | по центру | снизу | <процент длины>]? | 
 [[ слева | справа] <процент длины> ] && [ [верх | низ] <длина-процент> ] 
 
 "> = 
  |

Настройка положения маски

Измените значение mask-position на любое из допустимых значений, описанных выше. При просмотре примера в браузере на основе Chromium измените значение -webkit-mask-position .

Спецификация
Модуль маскирования CSS, уровень 1
# the-mask-position

Таблицы BCD загружаются только в браузере с включенным JavaScript.

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

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