diff options
Diffstat (limited to 'files/ru/web/css/position/index.html')
| -rw-r--r-- | files/ru/web/css/position/index.html | 22 |
1 files changed, 11 insertions, 11 deletions
diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html index 3baa0548f0..fb6002c2fb 100644 --- a/files/ru/web/css/position/index.html +++ b/files/ru/web/css/position/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/position <li><strong>Элемент с липкой позицией</strong> — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} <code>position</code> является <code>sticky</code>. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от <code>auto</code>) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.</li> </ul> -<p>В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p> +<p>В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределённым (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p> <p>За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):</p> @@ -39,19 +39,19 @@ translation_of: Web/CSS/position <dl> <dt><code>static</code></dt> - <dd>Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> и <code>z-index</code> <em>не применяются</em> к данному элементу. Это значение по умолчанию.</dd> + <dd>Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> и <code>z-index</code> <em>не применяются</em> к данному элементу. Это значение по умолчанию.</dd> <dt><code>relative</code></dt> <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается <em>относительно себя</em> на основе значений <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была <code>static</code>.</dd> - <dd>Это значение создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Его влияние на элементы <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> и <code>table-caption</code> не определено.</dd> + <dd>Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Его влияние на элементы <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> и <code>table-caption</code> не определено.</dd> <dt><code>absolute</code></dt> - <dd>Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>.</dd> + <dd>Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создаётся пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>.</dd> <dd>Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.</dd> <dt><code>fixed</code></dt> - <dd>Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство <code>transform</code>, <code>perspective</code>, или <code>filter</code>, установленное на что-то иное, кроме <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с <code>perspective</code> и <code>filter</code>, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>.</dd> - <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на <em>каждой странице</em>.</dd> + <dd>Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство <code>transform</code>, <code>perspective</code>, или <code>filter</code>, установленное на что-то иное, кроме <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с <code>perspective</code> и <code>filter</code>, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>.</dd> + <dd>Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на <em>каждой странице</em>.</dd> <dt><code>sticky</code></dt> <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего <em>прокручивающего предка</em> и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>. Смещение не влияет на положение любых других элементов.</dd> - <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при <code>overflow</code> равном <code>hidden</code>, <code>scroll</code>, <code>auto</code> или <code>overlay</code>), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd> + <dd>Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при <code>overflow</code> равном <code>hidden</code>, <code>scroll</code>, <code>auto</code> или <code>overlay</code>), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -62,7 +62,7 @@ translation_of: Web/CSS/position <h3 id="Relative_positioning" name="Relative_positioning">Относительное позиционирование</h3> -<p>Относительно позиционированные элементы смещены на определенную величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведенном ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.</p> +<p>Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.</p> <h4 id="HTML">HTML</h4> @@ -134,7 +134,7 @@ span { <h3 id="Fixed_positioning" name="Fixed_positioning">Фиксированное позиционирование</h3> -<p>Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было <code>transform</code>, <code>perspective</code>, или свойства <code>filter</code>, отличное от <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c <code>id="one"</code> фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.</p> +<p>Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было <code>transform</code>, <code>perspective</code>, или свойства <code>filter</code>, отличное от <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c <code>id="one"</code> фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.</p> <h4 id="HTML_2">HTML</h4> @@ -196,7 +196,7 @@ span { <h3 id="Sticky_positioning" name="Sticky_positioning">Липкое позиционирование</h3> -<p>Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечет заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...</p> +<p>Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...</p> <pre class="brush: css">#one { position: sticky; top: 10px; }</pre> @@ -322,6 +322,6 @@ dd + dd { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> <div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check outand send us a pull request.<br> -Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("css.properties.position")}}</p> |