Position

Use these shorthand utilities for quickly configuring the position of an element.

Fixed top

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.

                    <div class="fixed-top">...</div>
                

Fixed bottom

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.

                    <div class="fixed-bottom">...</div>
                

Utilities

To positioning element you can use special position classes and them media variants: .pos-absolute, .pos-relative, .pos-fixed, .pos-static, .pos-absolute-*, .pos-relative-*, .pos-fixed-*, .pos-static-*. This classes sets the position property.

Change asterisk to sm, md, lg, xl or xxl.

Rose of the wind

Metro 4 contains classes to place object on sides of rose of the wind. To place use classes: .put-nw, .put-n, .put-ne, .put-sw, .put-s, .put-se, .put-wn, .put-w, .put-ws, .put-en, .put-e, .put-es.

In example below red squares placed on sides of the rose.

                    <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>
                

Rose of the wind classes required position: absolute for element.

Position for dropdown

In additional, Metro 4 contains two classes for dropdown positioning: .put-left and .put-right.

                    <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>
                

                    .put-left {
                        left: 0;
                        right: auto;
                    }

                    .put-right {
                        left: auto;
                        right: 0;
                    }
                

Also you can use media equivalent for .put-* classes with media suffixes. More information about it.

Positions

Metro 4 contains position classes to simple positioning element inside parent. You can use next classes to set element position inside parent: .pos-top-left, .pos-top-center, .pos-top-right, .pos-bottom-left, .pos-bottom-center, .pos-bottom-right, .pos-right-center, .pos-left-center and .pos-center.

                    <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>
                

Important! Element property display must be set in one of two values: absolute or fixed.