Positions

Component dedicated to elements positioning

Responsive

Every modifier of pos component is responsive, which means that every features can be applied on specified screen sizes.

The following example shows an HTML element onto which MODIFIER_NAME is applied on SCREEN_SIZE_NAME

<HTMLTag class="c-pos m-[MODIFIER_NAME]--[SCREEN_SIZE_NAME]"></HTMLTag>

The following example shows an HTML element onto which MODIFIER_NAME is applied on multiple screen sizes through attribute.

<HTMLTag class="c-pos" m-[MODIFIER_NAME]="[SCREEN_SIZE_1], [SCREEN_SIZE_2], [SCREEN_SIZE_3]"></HTMLTag>

Similar to

<HTMLTag class="c-pos m-[MODIFIER_NAME]--[SCREEN_SIZE_1] m-[MODIFIER_NAME]--[SCREEN_SIZE_2] m-[MODIFIER_NAME]--[SCREEN_SIZE_3]"></HTMLTag>

<!-- Responsive classes -->
<div class="c-pos m-fixed--xs m-top-left--xs">Position fixed top left on xs screen size</div>
<!-- Shorthand -->
<div class="c-pos" m-fixed="xs" m-right-0="xs" m-top-0="xs">Position fixed top right on xs screen size</div>
<!-- Shorthand -->
<div class="c-pos" m-fixed="xs,sm" m-middle-left="xs,sm">Position fixed bottom right on xs and sm screen sizes</div>
<!-- DEMO ONLY -->
<style>
    body { 
        background-color: var(--goafe-color-support-success-500);
        padding: 1em;
    }
    div { 
        background-color: var(--goafe-color-neutral-900);
        margin-bottom: 1em;
    }

</style>

Combo positioning modifier

This modifier affects top and left CSS properties.

<section>
    <div class="c-pos m-top-left">top 0% left 0%</div>
    <div class="c-pos m-top-center">top 0% left 50%</div>
    <div class="c-pos m-top-right">top 0% left 100%</div>

    <div class="c-pos m-middle-left">top 50% left 0%</div>
    <div class="c-pos m-middle-center">top 50% left 50%</div>
    <div class="c-pos m-middle-right">top 50% left 100%</div>

    <div class="c-pos m-bottom-left">top 100% left 0%</div>
    <div class="c-pos m-bottom-center">top 100% left 50%</div>
    <div class="c-pos m-bottom-right">top 100% left 100%</div>
</section>

<style>
    /* DEMO ONLY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin-bottom: 60px;
    }
    section .c-pos {
        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="c-pos m-top-0">top 0%</div>
    <div class="c-pos m-top-50">top 50%</div>
    <div class="c-pos m-top-100">top 100%</div>
</section>

<style>
    /* DEMO ONLY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin-bottom: 60px;
    }
    section .c-pos {
        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="c-pos m-right-0">right 0%</div>
    <div class="c-pos m-right-50">right 50%</div>
    <div class="c-pos m-right-100">right 100%</div>
</section>

<style>
    /* DEMO ONLY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin: 0px auto 20px auto;
    }
    section .c-pos {
        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="c-pos m-bottom-0">bottom 0%</div>
    <div class="c-pos m-bottom-50">bottom 50%</div>
    <div class="c-pos m-bottom-100">bottom 100%</div>
</section>

<style>
    /* DEMO ONLY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin-bottom: 60px;
    }
    section .c-pos {
        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="c-pos m-left-0">left 0%</div>
    <div class="c-pos m-left-50">left 50%</div>
    <div class="c-pos m-left-100">left 100%</div>
</section>

<style>
    /* DEMO ONLY */
    body { padding: 20px; }
    section {
        position: relative;
        border: 1px dashed fuchsia;
        height: 50vh;
        width: 50vw;
        margin-bottom: 20px;
    }
    section .c-pos {
        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, m-anchor-top-center means that the top center of the element is moved to its top left original position.

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

<style>
    /* DEMO ONLY */
    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 .c-pos {
        border: 1px dotted #333;
    }
</style>

z-index modifiers

Here is the list of available z-index values

  • m-z--1 for z-index: -1
  • m-z-100 for z-index: 100
  • m-z-200 for z-index: 200
  • m-z-300 for z-index: 300
  • m-z-1000 for z-index: 1000