metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Use these shorthand utilities for quickly configuring the position of an element."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Position - Metro 4 :: Popular HTML, CSS and JS library</title> <style> .pos-demo { display: none; } </style> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Position</a></li> <li class="toc-entry"><a href="#_pos_fixed_top">Fixed top</a></li> <li class="toc-entry"><a href="#_pos_fixed_bottom">Fixed bottom</a></li> <li class="toc-entry"><a href="#_pos_utils">Utilities</a></li> <li class="toc-entry"><a href="#_pos_rose">Rose of the wind</a></li> <li class="toc-entry"><a href="#_pos_dropdown">Dropdown</a></li> <li class="toc-entry"><a href="#_pos_positions">Positions</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Position</h1> <p class="text-leader"> Use these shorthand utilities for quickly configuring the position of an element. </p>  <h3 id="_pos_fixed_top">Fixed top</h3> <p> Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. </p> <pre><code class="html"> <div class="fixed-top">...</div> </code></pre> <h3 id="_pos_fixed_bottom">Fixed bottom</h3> <p> Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. </p> <pre><code class="html"> <div class="fixed-bottom">...</div> </code></pre> <h3 id="_pos_utils">Utilities</h3> <p> To positioning element you can use special position classes and them media variants: <code>.pos-absolute</code>, <code>.pos-relative</code>, <code>.pos-fixed</code>, <code>.pos-static</code>, <code>.pos-absolute-*</code>, <code>.pos-relative-*</code>, <code>.pos-fixed-*</code>, <code>.pos-static-*</code>. This classes sets the <code>position</code> property. </p> <p class="text-small text-muted"> Change asterisk to <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> or <code>xxl</code>. </p> <h3 id="_pos_rose">Rose of the wind</h3> <p> Metro 4 contains classes to place object on sides of rose of the wind. To place use classes: <code>.put-nw</code>, <code>.put-n</code>, <code>.put-ne</code>, <code>.put-sw</code>, <code>.put-s</code>, <code>.put-se</code>, <code>.put-wn</code>, <code>.put-w</code>, <code>.put-ws</code>, <code>.put-en</code>, <code>.put-e</code>, <code>.put-es</code>. </p> <p> In example below red squares placed on sides of the rose. </p> <div class="example" style="height: 300px;"> <div class="row h-100"> <div class="cell-md-6 text-center h-100"> <img src="images/wind-rose.png" class="h-100"> </div> <div class="cell-md-6"> <div style="width: 100px; height: 100px; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%;" class="pos-absolute mx-auto bg-gray"> <div class="bg-red p-2 pos-absolute put-nw"></div> <div class="bg-red p-2 pos-absolute put-n"></div> <div class="bg-red p-2 pos-absolute put-ne"></div> <div class="bg-red p-2 pos-absolute put-sw"></div> <div class="bg-red p-2 pos-absolute put-s"></div> <div class="bg-red p-2 pos-absolute put-se"></div> <div class="bg-red p-2 pos-absolute put-wn"></div> <div class="bg-red p-2 pos-absolute put-w"></div> <div class="bg-red p-2 pos-absolute put-ws"></div> <div class="bg-red p-2 pos-absolute put-en"></div> <div class="bg-red p-2 pos-absolute put-e"></div> <div class="bg-red p-2 pos-absolute put-es"></div> </div> </div> </div> </div> <pre><code class="html"> <div class="put-nw"></div> <div class="put-n"></div> <div class="put-ne"></div> <div class="put-sw"></div> <div class="put-s"></div> <div class="put-se"></div> <div class="put-wn"></div> <div class="put-w"></div> <div class="put-ws"></div> <div class="put-en"></div> <div class="put-e"></div> <div class="put-es"></div> </code></pre> <p class="remark alert"> Rose of the wind classes required <code>position: absolute</code> for element. </p>  <h3 id="_pos_dropdown">Position for dropdown</h3> <p> In additional, Metro 4 contains two classes for dropdown positioning: <code>.put-left</code> and <code>.put-right</code>. </p> <div class="example"> <div class="dropdown-button"> <button class="button dropdown-toggle">Button</button> <ul class="d-menu put-left" data-role="dropdown"> <li><a href="#">Reply</a></li> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> <div class="dropdown-button place-right"> <button class="button dropdown-toggle">Button</button> <ul class="d-menu put-right" data-role="dropdown"> <li><a href="#">Reply</a></li> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> </div> <pre><code class="html"> <div class="dropdown-button"> <button class="button dropdown-toggle">Button</button> <ul class="d-menu put-left" data-role="dropdown"> <li><a href="#">Reply</a></li> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> <div class="dropdown-button place-right"> <button class="button dropdown-toggle">Button</button> <ul class="d-menu put-right" data-role="dropdown"> <li><a href="#">Reply</a></li> <li><a href="#">Reply All</a></li> <li><a href="#">Forward</a></li> <li class="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> </code></pre> <pre><code class="css"> .put-left { left: 0; right: auto; } .put-right { left: auto; right: 0; } </code></pre> <p class="remark"> Also you can use media equivalent for <code>.put-*</code> classes with media suffixes. <a href="media.html">More information about it</a>. </p> <h3 id="_pos_positions">Positions</h3> <p> Metro 4 contains position classes to simple positioning element inside parent. You can use next classes to set element position inside parent: <code>.pos-top-left</code>, <code>.pos-top-center</code>, <code>.pos-top-right</code>, <code>.pos-bottom-left</code>, <code>.pos-bottom-center</code>, <code>.pos-bottom-right</code>, <code>.pos-right-center</code>, <code>.pos-left-center</code> and <code>.pos-center</code>. </p> <div class="example d-flex flex-justify-center"> <div class="p-10 bg-red pos-fixed pos-top-left z-top pos-demo"></div> <div class="p-10 bg-red pos-fixed pos-top-center z-top pos-demo"></div> <div class="p-10 bg-red pos-fixed pos-top-right z-top pos-demo"></div> <div class="p-10 bg-red pos-fixed pos-bottom-right z-top pos-demo"></div> <div class="p-10 bg-red pos-fixed pos-bottom-left z-top pos-demo"></div> <div class="p-10 bg-red pos-fixed pos-bottom-center z-top pos-demo"></div> <div class="p-10 bg-red pos-fixed pos-left-center z-top pos-demo"></div> <div class="p-10 bg-red pos-fixed pos-right-center z-top pos-demo"></div> <div class="p-10 bg-red pos-fixed pos-center z-top pos-demo"></div> <input type="checkbox" data-role="switch" data-caption="Show elements" onclick="$(this).is(':checked') ? $('.pos-demo').show() : $('.pos-demo').hide()"> </div> <pre><code class="html"> <div class="pos-fixed pos-top-left"></div> <div class="pos-fixed pos-top-center"></div> <div class="pos-fixed pos-top-right"></div> <div class="pos-fixed pos-bottom-right"></div> <div class="pos-fixed pos-bottom-left"></div> <div class="pos-fixed pos-bottom-center"></div> <div class="pos-fixed pos-left-center"></div> <div class="pos-fixed pos-right-center"></div> <div class="pos-fixed pos-center"></div> </code></pre> <p class="remark warning"> Important! Element property <code>display</code> must be set in one of two values: <code>absolute</code> or <code>fixed</code>. </p> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>