Position

The .position-* classes are used to configure the position of an element within the viewport. Additionally, beside these, there are additional edge position utilities which will be further detailed down below.

    <div class="position-static"></div>
    <div class="position-relative"></div>
    <div class="position-absolute"></div>
    <div class="position-fixed"></div>
    <div class="position-sticky"></div>

The position of the elements can be further configured using the edge positioning utilities. The syntax is .{property}-{position} where the property is one of the following:

• start for horizontal left potisioning
• top for vertical top positioning
• end for horizontal right positioning
• bottom for vertical bottom positioning

And the position is one of the following:

• 0 - represents a position that is defined as 0% distant from the origin in relation to the parent element/li>
• 50 - represents a position that is defined as 50% distant from the origin in relation to the parent element
• 100 - represents a position that is defined as 100% distant from the origin in relation to the parent element

    <div class="position-relative rounded-5 bg">
        <div class="position-absolute top-0 start-0">
        <div class="position-absolute top-0 end-0">
        <div class="position-absolute top-50 start-50">
        <div class="position-absolute bottom-50 end-50">
        <div class="position-absolute bottom-0 start-0">
        <div class="position-absolute bottom-0 end-0">
    </div>

There are multiple ways of centering content in Haze. One of them is using translateX(-50%) and translateY(-50%) properties and requires absolute positioning and edge utilities to be used adjacently.

    <div class="position-relative bg">
        <div class="position-absolute top-0 start-0 translate-middle">
        <div class="position-absolute top-0 start-50 translate-middle">
        <div class="position-absolute top-0 start-100 translate-middle">
        <div class="position-absolute top-50 start-0 translate-middle">
        <div class="position-absolute top-50 start-50 translate-middle">
        <div class="position-absolute top-50 start-100 translate-middle">
        <div class="position-absolute top-100 start-0 translate-middle">
        <div class="position-absolute top-100 start-50 translate-middle">
        <div class="position-absolute top-100 start-100 translate-middle">
    </div>

There is an alternate method that makes use of the flex utilities; More information will be provided in the Utilities/ Flex section.