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
.