positioning.html

<section id="bottom" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/positioning/">In collection: <strong>positioning</strong> </a><a class="property-links-direct" href="{{site.url}}/property/bottom/" data-property-name="bottom" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="bottom">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/bottom" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#bottom"><span>#</span>bottom</a></h2><div class="property-description"><p>Defines the position of the element according to its <strong>bottom</strong> edge.</p></div></header><style type="text/css">.bottom { background: #310736;height: 200px;position: relative; }</style><style type="text/css">.bottom p { color: #fff; }.bottom .natural { width: 200px; }.bottom .actual { animation-direction: alternate;animation-duration: 2s;animation-iteration-count: infinite;position: absolute;width: 200px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="bottom: auto;">bottom: auto;</code></p><div class="example-description"><p>The element will remain in its <strong>natural</strong> position.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div bottom" id="bottom-auto"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#bottom-auto{ bottom:auto;}</style><style type="text/css">#bottom-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="bottom: 20px;">bottom: 20px;</code></p><div class="example-description"><p>If the element is in position <strong>relative</strong>, the element will move <em>upwards</em> by the amount defined by the <strong>bottom</strong> value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div bottom" id="bottom-20px"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#bottom-20px{ bottom:20px;}</style><style type="text/css">#bottom-20px .actual { animation-name: fadeIn;bottom: 20px;position: relative;transform: translateY(-100%); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="bottom: 0;">bottom: 0;</code></p><div class="example-description"><p>If the element is in position <strong>absolute</strong>, the element will position itself from the <em>bottom</em> of the first positioned <strong>ancestor</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div bottom" id="bottom-0"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#bottom-0{ bottom:0;}</style><style type="text/css">#bottom-0 .actual { bottom: 0; }</style></section></section><section id="left" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/positioning/">In collection: <strong>positioning</strong> </a><a class="property-links-direct" href="{{site.url}}/property/left/" data-property-name="left" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="left">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/left" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#left"><span>#</span>left</a></h2><div class="property-description"><p>Defines the position of the element according to its <strong>left</strong> edge.</p></div></header><style type="text/css">.left { background: #310736;height: 200px;position: relative; }</style><style type="text/css">.left p { color: #fff; }.left .natural { width: 200px; }.left .actual { animation-direction: alternate;animation-duration: 2s;animation-iteration-count: infinite;position: absolute;width: 200px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="left: auto;">left: auto;</code></p><div class="example-description"><p>The element will remain in its <strong>natural</strong> position.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div left" id="left-auto"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#left-auto{ left:auto;}</style><style type="text/css">#left-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="left: 80px;">left: 80px;</code></p><div class="example-description"><p>If the element is in position <strong>relative</strong>, the element will move <em>left</em> by the amount defined by the <strong>left</strong> value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div left" id="left-80px"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#left-80px .actual { animation-name: fadeIn;left: 80px;position: relative;transform: translateY(-100%); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="left: -20px;">left: -20px;</code></p><div class="example-description"><p>If the element is in position <strong>absolute</strong>, the element will position itself from the <em>left</em> of the first positioned <strong>ancestor</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div left" id="left--20px"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#left--20px .actual { animation-name: fadeIn;left: -20px;transform: translateY(-100%); }</style></section></section><section id="position" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/positioning/">In collection: <strong>positioning</strong> </a><a class="property-links-direct" href="{{site.url}}/property/position/" data-property-name="position" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="position">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/position" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#position"><span>#</span>position</a></h2><div class="property-description"><p>Defines the position behavior of the element.</p></div></header><style type="text/css">.position { background: #310736;color: #fff;height: 200px;position: relative; }</style><style type="text/css">.position .block--alpha { margin-top: 1em; }.position .block--pink { position: absolute;right: 5px;top: 5px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="position: static;">position: static;</code></p><div class="example-description"><p>The element will remain in the <strong>natural flow</strong> of the page.</p><p>As a result, it will <strong>not</strong> act as anchor point for the absolutely positioned pink block.</p><p>Also, it will <strong>not</strong> react to the following properties:</p><ul><li><code>top</code></li><li><code>bottom</code></li><li><code>left</code></li><li><code>right</code></li><li><code>z-index</code></li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div position" id="position-static"><p>Ancestor container</p><div class="block block--alpha"><strong>Target element<br>position: static</strong><div class="block block--pink">Child element<br>position: absolute<br>right: 5px<br>top: 5px</div></div></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="position: relative;">position: relative;</code></p><div class="example-description"><p>The element will remain in the <strong>natural flow</strong> of the page.</p><p>It also makes the element <strong>positioned</strong>: it will act as an anchor point for the absolutely positioned pink block.</p><p>Also, it will <strong>react</strong> to the following properties:</p><ul><li><code>top</code></li><li><code>bottom</code></li><li><code>left</code></li><li><code>right</code></li><li><code>z-index</code></li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div position" id="position-relative"><p>Ancestor container</p><div class="block block--alpha"><strong>Target element<br>position: relative</strong><div class="block block--pink">Child element<br>position: absolute<br>right: 5px<br>top: 5px</div></div></div></div></aside><style type="text/css">#position-relative .block--alpha { position: relative; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="position: absolute;">position: absolute;</code></p><div class="example-description"><p>The element will <strong>not</strong> remain in the natural flow of the page. It will position itself according to the <strong>closest positioned ancestor</strong>.</p><p>Because it&#39;s <strong>positioned</strong>, it will act as an anchor point for the absolutely positioned pink block.</p><p>Also, it will <strong>react</strong> to the following properties:</p><ul><li><code>top</code></li><li><code>bottom</code></li><li><code>left</code></li><li><code>right</code></li><li><code>z-index</code></li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div position" id="position-absolute"><p>Ancestor container</p><div class="block block--alpha"><strong>Target element<br>position: absolute<br>left: 0<br>top: 0</strong><div class="block block--pink">Child element<br>right: 5px<br>top: 5px</div></div></div></div></aside><style type="text/css">#position-absolute .block--alpha { left: 0;margin-top: 0;position: absolute;top: 0;width: 280px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="position: fixed;">position: fixed;</code></p><div class="example-fixed"><a class="button example-fixed-toggle" data-slug="position-fixed"></a></div><div class="example-description"><p>The element will <strong>not</strong> remain in the natural flow of the page. It will position itself according to the <strong>viewport</strong>.</p><p>Because it&#39;s <strong>positioned</strong>, it will act as an anchor point for the absolutely positioned pink block.</p><p>Also, it will <strong>react</strong> to the following properties:</p><ul><li><code>top</code></li><li><code>bottom</code></li><li><code>left</code></li><li><code>right</code></li><li><code>z-index</code></li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div position" id="position-fixed"><p>Ancestor container</p><div class="block block--alpha"><strong>Target element<br>position: fixed<br>right: 0<br>top: 0</strong><div class="block block--pink">Child element<br>position: absolute<br>right: 5px<br>top: 5px</div></div></div></div></aside><style type="text/css">#position-fixed.is-fixed .block--alpha { position: fixed;z-index: 10000; }</style><style type="text/css">#position-fixed .block--alpha { left: auto;right: 0;margin-top: 0;position: absolute;top: 0;width: 280px; }</style></section></section><section id="right" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/positioning/">In collection: <strong>positioning</strong> </a><a class="property-links-direct" href="{{site.url}}/property/right/" data-property-name="right" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="right">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/right" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#right"><span>#</span>right</a></h2><div class="property-description"><p>Defines the position of the element according to its <strong>right</strong> edge.</p></div></header><style type="text/css">.right { background: #310736;height: 200px;position: relative; }</style><style type="text/css">.right p { color: #fff; }.right .natural { width: 200px; }.right .actual { animation-direction: alternate;animation-duration: 2s;animation-iteration-count: infinite;position: absolute;width: 200px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="right: auto;">right: auto;</code></p><div class="example-description"><p>The element will remain in its <strong>natural</strong> position.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div right" id="right-auto"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#right-auto{ right:auto;}</style><style type="text/css">#right-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="right: 80px;">right: 80px;</code></p><div class="example-description"><p>If the element is in position <strong>relative</strong>, the element will move <em>right</em> by the amount defined by the <strong>right</strong> value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div right" id="right-80px"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#right-80px .actual { animation-name: fadeIn;right: 80px;position: relative;transform: translateY(-100%); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="right: -20px;">right: -20px;</code></p><div class="example-description"><p>If the element is in position <strong>absolute</strong>, the element will position itself from the <em>right</em> of the first positioned <strong>ancestor</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div right" id="right--20px"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#right--20px .actual { animation-name: fadeIn;right: -20px;transform: translateY(-100%); }</style></section></section><section id="top" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/positioning/">In collection: <strong>positioning</strong> </a><a class="property-links-direct" href="{{site.url}}/property/top/" data-property-name="top" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="top">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/top" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#top"><span>#</span>top</a></h2><div class="property-description"><p>Defines the position of the element according to its top edge.</p></div></header><style type="text/css">.top { background: #310736;height: 200px;position: relative; }</style><style type="text/css">.top p { color: #fff; }.top .natural { width: 200px; }.top .actual { animation-direction: alternate;animation-duration: 2s;animation-iteration-count: infinite;position: absolute;width: 200px; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="top: auto;">top: auto;</code></p><div class="example-description"><p>The element will remain in its <strong>natural</strong> position.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div top" id="top-auto"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#top-auto{ top:auto;}</style><style type="text/css">#top-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="top: 20px;">top: 20px;</code></p><div class="example-description"><p>If the element is in position <strong>relative</strong>, the element will move <em>downwards</em> by the amount defined by the <strong>top</strong> value.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div top" id="top-20px"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#top-20px{ top:20px;}</style><style type="text/css">#top-20px .actual { animation-name: fadeIn;position: relative;top: 20px;transform: translateY(-100%); }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="top: 0;">top: 0;</code></p><div class="example-description"><p>If the element is in position <strong>absolute</strong>, the element will position itself from the <em>top</em> of the first positioned <strong>ancestor</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div top" id="top-0"><p>Parent container</p><div class="natural">Natural position</div><div class="actual">Actual position</div></div></div></aside><style type="text/css">#top-0{ top:0;}</style><style type="text/css">#top-0 .actual { top: 0; }</style></section></section><section id="z-index" class="property"><header class="property-header"><nav class="property-links"><a class="property-collection" href="{{site.url}}/positioning/">In collection: <strong>positioning</strong> </a><a class="property-links-direct" href="{{site.url}}/property/z-index/" data-property-name="z-index" data-tooltip="Single page for this property">Permalink</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="z-index">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/z-index" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="#z-index"><span>#</span>z-index</a></h2><div class="property-description"><p>Defines the <strong>order</strong> of the elements on the <strong>z-axis</strong>. It only works on <strong>positioned</strong> elements (anything apart from <code>static</code>).</p></div></header><style type="text/css">.z-index { height: 100px;padding: 0; }</style><style type="text/css">.z-index .block { height: 100%;left: 0;position: absolute;width: 25%; }.z-index .block--alpha { height: 50%;width: 100%; }.z-index .block--pink { height: 60%;left: 20%;top: 20%;width: 60%; }.z-index .block--beta { height: 60%;left: 40%;top: 40%;width: 60%; }.z-index .block--yellow { left: 70%;width: 20%; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="z-index: auto;">z-index: auto;</code></p><div class="example-description"><p>The order is defined by the order in the <strong>HTML code</strong>:</p><ul><li>first in the code = behind</li><li>last in the code = in front</li></ul></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div z-index" id="z-index-auto"><div class="block block--alpha">One</div><div class="block block--pink">Two<br><strong>Target</strong></div><div class="block block--beta">Three</div><div class="block block--yellow">Four</div></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="z-index: 1;">z-index: 1;</code></p><div class="example-description"><p>The z-index value is <strong>relative</strong> to the other ones. The target element is move in <strong>front</strong> of its siblings.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div z-index" id="z-index-1"><div class="block block--alpha">One</div><div class="block block--pink">Two<br><strong>Target</strong></div><div class="block block--beta">Three</div><div class="block block--yellow">Four</div></div></div></aside><style type="text/css">#z-index-1 .block--pink { z-index: 1; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="z-index: -1;">z-index: -1;</code></p><div class="example-description"><p>You can use <strong>negative values</strong>. The target element is move in <strong>behind</strong> its siblings.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div z-index" id="z-index--1"><div class="block block--alpha">One</div><div class="block block--pink">Two<br><strong>Target</strong></div><div class="block block--beta">Three</div><div class="block block--yellow">Four</div></div></div></aside><style type="text/css">#z-index--1 .block--pink { z-index: -1; }</style></section></section>