Positions

Component dedicated to elements positioning

Responsive

This component is responsive, which means that every modifier may be applied using classes or shorthand attribute on specified screen sizes.

<!-- Design tokens with classes -->
<element class="[MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME1] [MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME2]"></element>
<!-- Example with md width container modifier applied only on sm and md screen sizes -->
<div class="my-position mod-w-md-sm mod-w-md-md"></div>

<!-- Design tokens with attribute shorthand -->
<element [MOD_PREFIX]-[MOD_NAME]="[SCR_SIZE_NAME1],[SCR_SIZE_NAME2],etc"></element>
<!-- Example with md width container modifier applied only on sm and md screen sizes -->
<div class="my-position" mod-w-md="sm,md"></div>

Position type modifier

This modifier affects position CSS property.

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

<style>
    /* DEMO ONY */
    body { background-color: #eee; }
    .my-position { background-color: white; }
</style>

Combo positioning modifier

This modifier affects top and left CSS properties.

<section>
    <div class="my-position mod-top-left">top 0% left 0%</div>
    <div class="my-position mod-top-center">top 0% left 50%</div>
    <div class="my-position mod-top-right">top 0% left 100%</div>

    <div class="my-position mod-middle-left">top 50% left 0%</div>
    <div class="my-position mod-middle-center">top 50% left 50%</div>
    <div class="my-position mod-middle-right">top 50% left 100%</div>

    <div class="my-position mod-bottom-left">top 100% left 0%</div>
    <div class="my-position mod-bottom-center">top 100% left 50%</div>
    <div class="my-position mod-bottom-right">top 100% left 100%</div>
</section>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin-bottom: 60px;
    }
    section .my-position {
        position: absolute;
        white-space: nowrap;
        border-top: 1px dotted #333;
        border-left: 1px dotted #333;
    }
</style>

Top position modifier

This modifier affects top CSS property onto which percentage or spacings tokens can be assigned.

<section>
    <div class="my-position mod-top-0">top 0%</div>
    <div class="my-position mod-top-50">top 50%</div>
    <div class="my-position mod-top-100">top 100%</div>
</section>

<section>
    <div class="my-position mod-top-none">top none spacing+px</div>
    <div class="my-position mod-top-xxs">top xxs spacing+px</div>
    <div class="my-position mod-top-xs">top xs spacing+px</div>
    <div class="my-position mod-top-sm">top sm spacing+px</div>
    <div class="my-position mod-top-md">top md spacing+px</div>
    <div class="my-position mod-top-lg">top lg spacing+px</div>
    <div class="my-position mod-top-xl">top xl spacing+px</div>
    <div class="my-position mod-top-xxl">top xxl spacing+px</div>
</section>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin-bottom: 60px;
    }
    section .my-position {
        position: absolute;
        white-space: nowrap;
        border-top: 1px dotted #333;
        border-left: 1px dotted #333;
    }
</style>

Right position modifier

This modifier affects right CSS property onto which percentage or spacings tokens can be assigned.

<section>
    <div class="my-position mod-right-0">right 0%</div>
    <div class="my-position mod-right-50">right 50%</div>
    <div class="my-position mod-right-100">right 100%</div>
</section>
<section>
    <div class="my-position mod-right-none">right none spacing+px</div>
</section>
<section>
    <div class="my-position mod-right-xxs">right xxs spacing+px</div>
</section>
<section>
    <div class="my-position mod-right-xs">right xs spacing+px</div>
</section>
<section>
    <div class="my-position mod-right-sm">right sm spacing+px</div>
</section>
<section>
    <div class="my-position mod-right-md">right md spacing+px</div>
</section>
<section>
    <div class="my-position mod-right-lg">right lg spacing+px</div>
</section>
<section>
    <div class="my-position mod-right-xl">right xl spacing+px</div>
</section>
<section>
    <div class="my-position mod-right-xxl">right xxl spacing+px</div>
</section>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin: 0px auto 20px auto;
    }
    section .my-position {
        position: absolute;
        white-space: nowrap;
        border-top: 1px dotted #333;
        border-right: 1px dotted #333;
    }
</style>

Bottom position modifier

This modifier affects bottom CSS property onto which percentage or spacings tokens can be assigned.

<section>
    <div class="my-position mod-bottom-0">bottom 0%</div>
    <div class="my-position mod-bottom-50">bottom 50%</div>
    <div class="my-position mod-bottom-100">bottom 100%</div>
</section>

<section>
    <div class="my-position mod-bottom-none">bottom none spacing+px</div>
    <div class="my-position mod-bottom-xxs">bottom xxs spacing+px</div>
    <div class="my-position mod-bottom-xs">bottom xs spacing+px</div>
    <div class="my-position mod-bottom-sm">bottom sm spacing+px</div>
    <div class="my-position mod-bottom-md">bottom md spacing+px</div>
    <div class="my-position mod-bottom-lg">bottom lg spacing+px</div>
    <div class="my-position mod-bottom-xl">bottom xl spacing+px</div>
    <div class="my-position mod-bottom-xxl">bottom xxl spacing+px</div>
</section>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin-bottom: 60px;
    }
    section .my-position {
        position: absolute;
        white-space: nowrap;
        border-bottom: 1px dotted #333;
        border-left: 1px dotted #333;
    }
</style>

Left position modifier

This modifier affects left CSS property onto which percentage or spacings tokens can be assigned.

<section>
    <div class="my-position mod-left-0">left 0%</div>
    <div class="my-position mod-left-50">left 50%</div>
    <div class="my-position mod-left-100">left 100%</div>
</section>
<section>
    <div class="my-position mod-left-none">left none spacing+px</div>
</section>
<section>
    <div class="my-position mod-left-xxs">left xxs spacing+px</div>
</section>
<section>
    <div class="my-position mod-left-xs">left xs spacing+px</div>
</section>
<section>
    <div class="my-position mod-left-sm">left sm spacing+px</div>
</section>
<section>
    <div class="my-position mod-left-md">left md spacing+px</div>
</section>
<section>
    <div class="my-position mod-left-lg">left lg spacing+px</div>
</section>
<section>
    <div class="my-position mod-left-xl">left xl spacing+px</div>
</section>
<section>
    <div class="my-position mod-left-xxl">left xxl spacing+px</div>
</section>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin-bottom: 20px;
    }
    section .my-position {
        position: absolute;
        white-space: nowrap;
        border-top: 1px dotted #333;
        border-left: 1px dotted #333;
    }
</style>

Anchors modifier

The element is moved in relation with its own width and height. Anchors modifier affects transform property. Anchors are virtual reference points on the element. Positioning is based on the following anchors of the element:

  • top left
  • top center
  • top right
  • middle left
  • middle center
  • middle right
  • bottom left
  • bottom center
  • bottom right

The green point if the reference point. For example, mod-anchor-top-center means that the top center of the element is moved to its top left original position.

<section>
    <div class="my-position">Element without anchor modifier</div>
</section>
<section>
    <div class="my-position mod-anchor-top-center">mod-anchor-top-center<br>transform: translateX(-50%) translateY(0%)</div>
</section>
<section>
    <div class="my-position mod-anchor-top-right">mod-anchor-top-right<br>transform: translateX(-100%) translateY(0%)</div>
</section>
<section>
    <div class="my-position mod-anchor-middle-left">mod-anchor-middle-left<br>transform: translateX(0%) translateY(-50%)</div>
</section>
<section>
    <div class="my-position mod-anchor-middle-center">mod-anchor-middle-center<br>transform: translateX(-50%) translateY(-50%)</div>
</section>
<section>
    <div class="my-position mod-anchor-middle-right">mod-anchor-middle-right<br>transform: translateX(-100%) translateY(-50%)</div>
</section>
<section>
    <div class="my-position mod-anchor-bottom-left">mod-anchor-bottom-left<br>transform: translateX(0%) translateY(-100%)</div>
</section>
<section>
    <div class="my-position mod-anchor-bottom-center">mod-anchor-bottom-center<br>transform: translateX(-50%) translateY(-100%)</div>
</section>
<section>
    <div class="my-position mod-anchor-bottom-right">mod-anchor-bottom-right<br>transform: translateX(-100%) translateY(-100%)</div> 
</section>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    section {
        border: 1px dashed fuchsia;
        width: 30vw;
        margin: 0px auto 100px auto;
        position: relative;
    }
    section:after {
        content: '';
        display: block;
        position: absolute;
        top: -6px; left: -6px;
        width: 12px; height: 12px;
        border-radius: 100%;
        background-color: yellowgreen;
    }
    section .my-position {
        border: 1px dotted #333;
    }
</style>