Positions

Positions in MIZ #

In the MIZ framework, position management allows you to precisely place elements on your web pages. Utilizing these positions helps you create more complex layouts and accurately place elements in your desired locations.

Basic Position Classes #

• position-relative: Positions the element relative to its normal position.
• position-absolute: Positions the element relative to the nearest positioned ancestor.
• position-fixed: Positions the element relative to the browser window.
• position-sticky: Positions the element based on the scroll position.

How to Use #

To use these classes, simply add them to your desired element. For example:

                    

                    
HTML

                    <div style="height:300px;" class="position-relative w-100">
    <div class="all-border-small position-absolute top-0 left-0 bg-primary-color p-6"></div>
    <div class="all-border-small position-absolute top-0 right-0 bg-border-secondary-color p-6"></div>
    <div class="all-border-small position-absolute bottom-0 left-0 bg-border-secondary-color p-6"></div>
    <div class="all-border-small position-absolute bottom-0 right-0 bg-primary-color p-6"></div>
</div>