Relative #

Use the position-relative class to make an element with position: relative.

<div class="position-relative">...</div>

This is useful if a module or its submodules use a link that is stretched to the full height and width of the element. See the Link component description for more details.

<div class="item position-relative">
    <div class="item-head">...</div>
    <div class="item-body">
        <a href="#" class="link-stretched">...</a>
    </div>
</div>

Over #

Use the position-over class to make an element over the previous one. For example, this works when you want to place an image as a background for text or other elements.

Quotes

Famous quotes
on nature

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

<div class="card bg-dark radius-base">
    <div class="card-image radius-base image-cover">
        <img class="radius-base" src="...">
    </div>
    <div class="card-box p-6 pb-10 position-over">
        <div class="card-label mb-3">
            <span class="label label-light">...</span>
        </div>
        <div class="card-head">
            <h2 class="heading-medium heading-light">
                <a href="#">...</a>
            </h2>
        </div>
        <div class="card-body mt-3">
            <p class="text-medium text-light">...</p>
        </div>
    </div>
</div>

Depth #

The framework has several helpers for organizing the depth of modules and blocks within them.

position-over — has a z-index: 3 and a position: absolute parameter, is used to organize content over the base position-base layer. Automatically stretches to the full height and width of the parent container.

position-base — has a z-index: 2 and a position: relative parameter, is used to organize the main content between the over and under layers.

position-under — has a z-index: 1 and a position: absolute parameter, is used to organize content under the base position-base layer. Automatically stretches to the full height and width of the parent container.

Here's how it works in the real world. The example below uses a position-base layer (blue border) for the main content and a position-under layer (red border) to implement the background image below the content.

<div class="hero position-relative">
    <!-- Module Content -->
    <div class="hero-container position-base">
        <div class="hero-head">...</div>
        <div class="hero-body">...</div>
        <div class="hero-cta">...</div>
    </div>
    <!-- Module Background -->
    <div class="hero-container position-under">
        <div class="hero-box flex flex-end h-100">
            <div class="hero-image max-40" style="background-image: url(...);"></div>
        </div>
    </div>
</div>