HPUCSS Framework | Position

Position Properties

Featuring the CSS position property values integrated as utility classes. Simply add a position property class in a wrapping element: .hpu-pos-{value}.

Where value is one of the following:

absolute
fixed
relative
static (default)
sticky

Responsive variations for position property classes are also available:

.hpu-pos-absolute

.hpu-pos-fixed

.hpu-pos-relative

.hpu-pos-static

.hpu-pos-sticky

.hpu-pos-absolute-sm

.hpu-pos-fixed-sm

.hpu-pos-relative-sm

.hpu-pos-static-sm

.hpu-pos-sticky-sm

.hpu-pos-absolute-md

.hpu-pos-fixed-md

.hpu-pos-relative-md

.hpu-pos-static-md

.hpu-pos-sticky-md

.hpu-pos-absolute-lg

.hpu-pos-fixed-lg

.hpu-pos-relative-lg

.hpu-pos-static-lg

.hpu-pos-sticky-lg

.hpu-pos-absolute-xl

.hpu-pos-fixed-xl

.hpu-pos-relative-xl

.hpu-pos-static-xl

.hpu-pos-sticky-xl

.hpu-pos-absolute-xxl

.hpu-pos-fixed-xxl

.hpu-pos-relative-xxl

.hpu-pos-static-xxl

.hpu-pos-sticky-xxl

Side-Specific Positioning

Use side-specific utility classes after defining the position property in the format: {side}-{n}{value}.

Where side is one or more of the following:
- top - sets the distance from the top edge.
- right - sets the distance from the right edge.
- bottom - sets the distance from the bottom edge.
- left - sets the distance from the left edge.
Where n is for negative values. Remove this if positive values are desired.
Where value is one of the percentage of the defined side from 0 through 100 for 0% through 100% respectively.

In the examples below, each box uses .hpu-pos-absolute for absolute positioning, and dimensions of 50px for both height and width using .hpu-h50px and .hpu-w50px respectively. Please refer to HPUCSS Dimensions for usage guides.

1

2

3

4

5

6

HTML


<div class="hpu-pos-relative hpu-h20rem hpu-w100pc hpu-bg-gray">
    <div class="hpu-pos-absolute top-0 left-0 hpu-h50px hpu-w50px hpu-bg-2nd">1</div>
    <div class="hpu-pos-absolute top-0 right-0 hpu-h50px hpu-w50px hpu-bg-2nd">2</div>
    <div class="hpu-pos-absolute bottom-50 left-50 hpu-h50px hpu-w50px hpu-bg-2nd">3</div>
    <div class="hpu-pos-absolute top-50 right-50 hpu-h50px hpu-w50px hpu-bg-2nd">4</div>
    <div class="hpu-pos-absolute bottom-0 left-0 hpu-h50px hpu-w50px hpu-bg-2nd">5</div>
    <div class="hpu-pos-absolute bottom-0 right-0 hpu-h50px hpu-w50px hpu-bg-2nd">6</div>
</div>

Responsive variations for side-specific positioning classes are also available:

For Positive Values:

.top-{0 - 100}

.right-{0 - 100}

.bottom-{0 - 100}

.left-{0 - 100}

.top-{0 - 100}-sm

.right-{0 - 100}-sm

.bottom-{0 - 100}-sm

.left-{0 - 100}-sm

.top-{0 - 100}-md

.right-{0 - 100}-md

.bottom-{0 - 100}-md

.left-{0 - 100}-md

.top-{0 - 100}-lg

.right-{0 - 100}-lg

.bottom-{0 - 100}-lg

.left-{0 - 100}-lg

.top-{0 - 100}-xl

.right-{0 - 100}-xl

.bottom-{0 - 100}-xl

.left-{0 - 100}-xl

.top-{0 - 100}-xxl

.right-{0 - 100}-xxl

.bottom-{0 - 100}-xxl

.left-{0 - 100}-xxl

For Negative Values:

.top-n{0 - 100}

.right-n{0 - 100}

.bottom-n{0 - 100}

.left-n{0 - 100}

.top-n{0 - 100}-sm

.right-n{0 - 100}-sm

.bottom-n{0 - 100}-sm

.left-n{0 - 100}-sm

.top-n{0 - 100}-md

.right-n{0 - 100}-md

.bottom-n{0 - 100}-md

.left-n{0 - 100}-md

.top-n{0 - 100}-lg

.right-n{0 - 100}-lg

.bottom-n{0 - 100}-lg

.left-n{0 - 100}-lg

.top-n{0 - 100}-xl

.right-n{0 - 100}-xl

.bottom-n{0 - 100}-xl

.left-n{0 - 100}-xl

.top-n{0 - 100}-xxl

.right-n{0 - 100}-xxl

.bottom-n{0 - 100}-xxl

.left-n{0 - 100}-xxl

Centering a div

Centering a div — the age-old, most-searched challenge in web development — is now effortless with position utility classes! Simply use the .translate-middle class to center any element horizontally and vertically.

This class applies the CSS transform: translate(-50%, -50%) property in combination with the side-specific positioning, allowing you to center an element in the area where an edge is defined.

In the example below, boxes are not only centered in the middle, but also on each edge defined using the side-specific positioning classes.

1

2

3

4

5

6

7

8

9

HTML


<div class="hpu-pos-relative hpu-h20rem hpu-w100pc hpu-bg-gray">
    <!-- 1st Row: -->
    <div class="hpu-pos-absolute top-0 left-0 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">1</div>
    <div class="hpu-pos-absolute top-0 left-50 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">2</div>
    <div class="hpu-pos-absolute top-0 left-100 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">3</div>

    <!-- 2nd Row: -->
    <div class="hpu-pos-absolute top-50 left-0 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">4</div>
    <div class="hpu-pos-absolute top-50 left-50 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">5</div>
    <div class="hpu-pos-absolute top-50 left-100 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">6</div>

    <!-- 3rd Row: -->
    <div class="hpu-pos-absolute top-100 left-0 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">7</div>
    <div class="hpu-pos-absolute top-100 left-50 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">8</div>
    <div class="hpu-pos-absolute top-100 left-100 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">9</div>
</div>

It is also possible to position elements either horizontally or vertically only. To achieve this, use either .translate-middleX or .translate-middleY respectively. This provides the CSS of transform: translateX(-50%) or transform: translateY(-50%).

1

2

3

4

5

6

7

8

9

HTML


<div class="hpu-pos-relative hpu-h20rem hpu-w100pc hpu-bg-gray">
    <!-- 1st Row: -->
    <div class="hpu-pos-absolute top-0 left-0 hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">1</div>
    <div class="hpu-pos-absolute top-0 left-50 translate-middleX hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">2</div>
    <div class="hpu-pos-absolute top-0 right-0 hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">3</div>

    <!-- 2nd Row: -->
    <div class="hpu-pos-absolute top-50 left-0 translate-middleY hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">4</div>
    <div class="hpu-pos-absolute top-50 left-50 translate-middle hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">5</div>
    <div class="hpu-pos-absolute top-50 right-0 translate-middleY hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">6</div>

    <!-- 3rd Row: -->
    <div class="hpu-pos-absolute bottom-0 left-0 hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">7</div>
    <div class="hpu-pos-absolute bottom-0 left-50 translate-middleX hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">8</div>
    <div class="hpu-pos-absolute bottom-0 right-0 hpu-h50px hpu-w50px hpu-bg-2nd hpu-border-1st">9</div>
</div>

Responsive variations for transform:translate CSS Property are also available:

.translate-middle

.translate-middleX

.translate-middleY

.translate-middle-sm

.translate-middleX-sm

.translate-middleY-sm

.translate-middle-md

.translate-middleX-md

.translate-middleY-md

.translate-middle-lg

.translate-middleX-lg

.translate-middleY-lg

.translate-middle-xl

.translate-middleX-xl

.translate-middleY-xl

.translate-middle-xxl

.translate-middleX-xxl

.translate-middleY-xxl

The z-index

z-index CSS Property works in conjunction with position. With position classes already available, adding z-index allows quick control over an element’s stack level.

Positive stack level range from 1 - 10 using the format: .zindex-{1 - 10}. Negative values range from -1 to -10 using the format: .zindex-n{1 - 10}.

.zindex-10

.zindex-5

.zindex-1

.zindex-n5

.zindex-n10

HTML


<div class="hpu-pos-relative hpu-h20rem hpu-w100pc">
    <div class="hpu-pos-absolute hpu-p-5 hpu-bg-2nd hpu-border-1st zindex-10"></div>
    <div class="hpu-pos-absolute hpu-mt-2rem hpu-ml-2rem hpu-p-5 hpu-bg-2nd hpu-border-1st zindex-5"></div>
    <div class="hpu-pos-absolute hpu-mt-4rem hpu-ml-4rem hpu-p-5 hpu-bg-2nd hpu-border-1st zindex-1"></div>
    <div class="hpu-pos-absolute hpu-mt-6rem hpu-ml-6rem hpu-p-5 hpu-bg-2nd hpu-border-1st zindex-n5"></div>
    <div class="hpu-pos-absolute hpu-mt-8rem hpu-ml-8rem hpu-p-5 hpu-bg-2nd hpu-border-1st zindex-n10"></div>
</div>

Responsive variations for z-index property are also available:

.zindex-{1 - 10}

.zindex-n{1 - 10}

.zindex-{1 - 10}-sm

.zindex-n{1 - 10}-sm

.zindex-{1 - 10}-md

.zindex-n{1 - 10}-md

.zindex-{1 - 10}-lg

.zindex-n{1 - 10}-lg

.zindex-{1 - 10}-xl

.zindex-n{1 - 10}-xl

.zindex-{1 - 10}-xxl

.zindex-n{1 - 10}-xxl