diff options
Diffstat (limited to 'files/uk/web/css/position/index.html')
| -rw-r--r-- | files/uk/web/css/position/index.html | 461 |
1 files changed, 0 insertions, 461 deletions
diff --git a/files/uk/web/css/position/index.html b/files/uk/web/css/position/index.html deleted file mode 100644 index 2d057ef9cc..0000000000 --- a/files/uk/web/css/position/index.html +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: position -slug: Web/CSS/position -tags: - - CSS - - CSS-властивість - - Розміщення -translation_of: Web/CSS/position ---- -<div>{{CSSRef}}</div> - -<p><a href="/uk/docs/CSS">CSS</a>-властивість <strong><code>position</code></strong> вказує, як елемент розміщено в документі. А властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, та {{Cssxref("left")}} визначають остаточне положення елемента.</p> - -<pre class="brush: css no-line-numbers">/* Keyword values */ -position: static; -position: relative; -position: absolute; -position: fixed; -position: sticky; - -/* Global values */ -position: inherit; -position: initial; -position: unset; -</pre> - -<div id="position"> -<div class="hidden"> -<pre class="brush: html"><div id="container"> - <div class="box"><strong>static</strong></div> - <div class="box relative"><strong>relative</strong><br/><br/>top: 30px;<br/>right: 20px;</div> - <div class="box sticky"><strong>sticky</strong><br/><br/>top: 20px;</div> - <div class="box fixed"><strong>fixed</strong><br/><br/>left: 280px;</div> - - <div class="text"> - <p>Try scrolling this example to see the effect of - <strong><code>fixed</code></strong> or - <strong><code>sticky</code></strong> positioning.</p> - <p>With <strong><code>fixed</code></strong> positioning, the - element does not move as the viewport scrolls.</p> - <p>With <strong><code>sticky</code></strong> positioning, the - element moves until it reaches a threshold: - in this case 20 pixels from the top of the container.</p> - <p>The other two boxes show the effect of - <strong><code>static</code></strong> and - <strong><code>relative</code></strong> positioning.</p> - </div> -</div> -</pre> -</div> - -<div class="hidden"> -<pre class="brush: css">#container { - border: 5px solid #F4F7F8; - width: 100%; - height: 300px; - display: flex; - overflow: scroll; - box-sizing: border-box; -} - -.box { - height: 80px; - margin: 5px; - padding: 5px; - margin-top: 100px; - background-color: yellow; - border: 2px solid red; - color: red; - font-family: monospace; -} - -.text { - max-width: 120px; - padding: 0 0.5em 0 120px; - font-family: sans-serif; -} - - -.relative { - position: relative; - top: 30px; - right: 20px; -} - -.sticky { - position: sticky; - top: 20px; -} - -.fixed { - position: fixed; - left: 280px; -} -</pre> -</div> -{{EmbedLiveSample("position", 1200, 300, "", "", "example-outcome-frame")}}</div> - -<p>{{cssinfo}}</p> - -<h3 id="Види_розміщення">Види розміщення</h3> - -<ul> - <li><strong>Розміщеним елементом</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>relative</code>, <code>absolute</code>, <code>fixed</code>, або <code>sticky</code>. Інакше кажучи, все окрім <code>static</code>.</li> - <li>Елементом з <strong>відносним розміщенням </strong>називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code style="font-size: 14px;">relative</code>. Властивості {{Cssxref("top")}} і {{Cssxref("bottom")}} вказують доземний (вертикальний) зсув від початкового положення; натомість властивості {{Cssxref("left")}} і {{Cssxref("right")}} визначають поземний (горизонтальний) зсув.</li> - <li>Елементом з <strong>абсолютним розміщенням</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>absolute</code> або <code>fixed</code>. Властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} та {{Cssxref("left")}} вказують зсуви від країв блока, що містить елемент (себто той блок є батьківським і відносно нього здійснюється розміщення елемента). Якщо елемент має {{cssxref("margin", "відступи")}}, то вони додаються до зсувів.</li> - <li>Елементом з <strong>«липким» розміщенням</strong> називають елемент, чиє {{cssxref("computed_value", "обчислене значення")}} властивості <code>position</code> — <code>sticky</code>. До певної межі (поки блок, всередині якого той елемент розташовано, не перетинає зазначеного порогового значення) це працює так само, як відносне розміщення, а тоді — як нерухоме (fixed).</li> -</ul> - -<p><span style="line-height: 1.5;">Most of the time, absolutely positioned elements that have</span><span style="line-height: 1.5;"> {{Cssxref("height")}} and {{Cssxref("width")}} set to <code>auto</code> are sized so as to fit their contents. However, non-replaced absolutely positioned elements can be made to fill the available vertical space by specifying </span><span style="line-height: 1.5;">both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, </span><code style="font-size: 14px;">auto</code><span style="line-height: 1.5;">). They can likewise be made to fill the available horizontal space by specifying </span><span style="line-height: 1.5;">both {{Cssxref("left")}} and {{Cssxref("right")}} and leaving {{Cssxref("width")}} as <code>auto</code>.</span></p> - -<p>Except for the case just described of absolutely positioned elements filling the available space:</p> - -<ul> - <li>If both <code>top</code> and <code>bottom</code> are specified (technically, not <code>auto</code>), <code>top</code> wins.</li> - <li>If both <code>left</code> and <code>right</code> are specified, <code>left</code> wins when {{Cssxref("direction")}} is <code>ltr</code> (English, horizontal Japanese, etc.) and <code>right</code> wins when {{Cssxref("direction")}} is <code>rtl</code> (Persian, Arabic, Hebrew, etc.).</li> -</ul> - -<h2 id="Синтаксис">Синтаксис</h2> - -<p>Значення властивості <code>position</code> може бути одним із ключових слів, що їх перелік наведено нижче.</p> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>static</code></dt> - <dd>The element is positioned according to the normal flow of the document. The {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} properties have <em>no effect</em>. This is the default value.</dd> - <dt><code>relative</code></dt> - <dd>The element is positioned according to the normal flow of the document, and then offset <em>relative to itself</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were <code>static</code>. This value creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. The effect of <code>relative</code> on <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, and <code>table-caption</code> elements is undefined.</dd> - <dt><code>absolute</code></dt> - <dd>The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. This value creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a> when the value of <code>z-index</code> is not <code>auto</code>. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.</dd> - <dt><span style="font-family: courier new,andale mono,monospace; font-weight: inherit; line-height: normal;">fixed</span></dt> - <dd>The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. This value always creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. When an ancestor has the <code>transform</code> property set to something other than <code>none</code>, that ancestor is used as the container instead of the viewport (see <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>). In printed documents, the element is placed in the same position on <em>every page</em>.</dd> -</dl> - -<dl> - <dt><code style="font-size: 14px;">sticky</code> {{experimental_inline}}</dt> - <dd>The element is positioned according to the normal flow of the document, and then offset relative to <em>its flow root and containing block</em> based on the values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. The offset does not affect the position of any other elements. This value always creates a new <a href="https://developer.mozilla.org/en/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>. The effect of <code style="font-size: 14px;">sticky</code> on table-related elements is the same as <code style="font-size: 14px;">relative</code>. Note that sticky, by specification, will not work inside element with overflow: hidden or auto. (ref: <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>)</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<h3 id="Relative_positioning" name="Relative_positioning">Відносне розміщення</h3> - -<p>Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div class="box" id="one">One</div> -<div class="box" id="two">Two</div> -<div class="box" id="three">Three</div> -<div class="box" id="four">Four</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">.box { - display: inline-block; - width: 100px; - height: 100px; - background: red; - color: white; -} - -#two { - position: relative; - top: 20px; - left: 20px; - background: blue; -} -</pre> - -<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p> - -<h3 id="Absolute_positioning" name="Absolute_positioning">Абсолютне розміщення</h3> - -<p>Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its <em>nearest positioned ancestor</em> (i.e., the nearest ancestor that is not <code>static</code>). If a positioned ancestor doesn't exist, the initial container is used. In the example below, box "Two" has no positioned ancestor, so it is positioned relative to the the <code><body></code> of the document.</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div class="box" id="one">One</div> -<div class="box" id="two">Two</div> -<div class="box" id="three">Three</div> -<div class="box" id="four">Four</div></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">.box { - display: inline-block; - width: 100px; - height: 100px; - background: red; - color: white; -} - -#two { - position: absolute; - top: 20px; - left: 20px; - background: blue; -}</pre> - -<p>{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}</p> - -<h3 id="Fixed_positioning" name="Fixed_positioning">Нерухоме розміщення</h3> - -<p>Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the <em>viewport</em>. This can be used to create a floating element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.</p> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><div class="outer"> - <p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. - </p> - <p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. - </p> - <div class="box" id="one">One</div> -</div> -</pre> - -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css">.box { - width: 100px; - height: 100px; - background: red; - color: white; -} - -#one { - position: fixed; - top: 80px; - left: 10px; - background: blue; -} - -.outer { - width: 500px; - height: 300px; - overflow: scroll; - padding-left: 150px; -} -</pre> - -<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p> - -<h3 id="Sticky_positioning" name="Sticky_positioning">«Липке» розміщення</h3> - -<p>Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed. For instance...</p> - -<pre class="brush: css">#one { position: sticky; top: 10px; }</pre> - -<p>...would position the element with id <em>one</em> relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.</p> - -<div>A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.</div> - -<div> </div> - -<div>You must specify a threshold with at least one of <span style="line-height: 1.5;"><code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.</span></div> - -<div> </div> - -<h4 id="HTML_4">HTML</h4> - -<pre class="brush: html"><dl> - <div> - <dt>A</dt> - <dd>Andrew W.K.</dd> - <dd>Apparat</dd> - <dd>Arcade Fire</dd> - <dd>At The Drive-In</dd> - <dd>Aziz Ansari</dd> - </div> - <div> - <dt>C</dt> - <dd>Chromeo</dd> - <dd>Common</dd> - <dd>Converge</dd> - <dd>Crystal Castles</dd> - <dd>Cursive</dd> - </div> - <div> - <dt>E</dt> - <dd>Explosions In The Sky</dd> - </div> - <div> - <dt>T</dt> - <dd>Ted Leo &amp; The Pharmacists</dd> - <dd>T-Pain</dd> - <dd>Thrice</dd> - <dd>TV On The Radio</dd> - <dd>Two Gallants</dd> - </div> -</dl> -</pre> - -<h4 id="CSS_4">CSS</h4> - -<pre class="brush: css">* { - box-sizing: border-box; -} - -dl > div { - background: #FFF; - padding: 24px 0 0 0; -} - -dt { - background: #B8C1C8; - border-bottom: 1px solid #989EA4; - border-top: 1px solid #717D85; - color: #FFF; - font: bold 18px/21px Helvetica, Arial, sans-serif; - margin: 0; - padding: 2px 0 0 12px; - position: -webkit-sticky; - position: sticky; - top: -1px; -} - -dd { - font: bold 20px/45px Helvetica, Arial, sans-serif; - margin: 0; - padding: 0 0 0 12px; - white-space: nowrap; -} - -dd + dd { - border-top: 1px solid #CCC; -} -</pre> - -<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p> - -<ul> -</ul> - -<h2 id="Specifications" name="Specifications">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td> - <td>{{Spec2('CSS3 Positioning')}}</td> - <td>Adds <code>sticky</code> property value.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Підтримка веб-переглядачами</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(1)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0 (1.0) [1]</td> - <td>4.0 [3]</td> - <td>4.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>fixed </code>value</td> - <td>{{CompatChrome(1)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0 (1.0) [4]</td> - <td>7.0</td> - <td>4.0</td> - <td>1.0 (85)</td> - </tr> - <tr> - <td><code>sticky</code> value</td> - <td>{{CompatChrome(56)}}</td> - <td>{{CompatUnknown}} [5]</td> - <td>32 (32.0) [2]</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>6.1 {{ property_prefix("-webkit-") }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(1)}}</td> - <td>{{CompatChrome(1)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1.0 (1.0) [1]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>7.0 {{ property_prefix("-webkit-") }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Since Firefox 30, Gecko allows {{HTMLElement("tr")}}, {{HTMLElement("thead")}}, and {{HTMLElement("tfoot")}} elements with a <code>position: relative;</code> style to act as absolute positioning containers. This means that a <code>position: absolute;</code> styled element inside the table can be positioned relative to these elements. In other browsers and in older versions of Firefox, setting <code>position: relative;</code> on a table row or row group has no effect. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing a warning to the JavaScript console if you use this feature: Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.</p> - -<p>[2] In Firefox 26 to Firefox 31 (inclusive), sticky positioning only works when the <code>about:config</code> preference <code>layout.css.sticky.enabled</code> is set to <code>true</code>. From Firefox 27 to 31, <code>true</code> is the default value for Nightly and Aurora versions of the browser. The preference has been removed in Firefox 48.</p> - -<p>[3] In Internet Explorer, fixed positioning doesn't work if the document is in <a href="http://msdn.microsoft.com/en-us/library/ie/ms531140(v=vs.85).aspx" title="position Property - MSDN">quirks mode</a>.</p> - -<p>[4] Prior to Firefox 44, <code>position: fixed</code> didn't create a stacking context in most cases. The specification, and Gecko implementation, have been modified to mimic Chrome and Safari's long-time behavior.</p> - -<p>[5] Sticky positioning is <a href="https://dev.modern.ie/platform/status/positionsticky/">in preview</a> for Edge.</p> |