Block positions - Codebase

There may be some situations where you want to re-position a block out of the normal document flow.

Types of block positioning

Codebase has utility classes for several types of block positioning:

relative
absolute
fixed
sticky
static (default, and for a reset)

Each of the above affect blocks at all viewport widths. Plus there are xs:, sm:, md:, and lg: responsive tiers of each.

Z-index layers

There are several z-index utilities, that can be used for layering (alongside absolute, fixed, and sticky):

z-index-1 / z-index-2 / z-index-3
z-index-997 / z-index-998 / z-index-999

The lower z-index-* utilities (1, 2, and 3) can be used for dropdown panels, stacking hero text (title, call-to-action, etc.) over a hero image, tabs, etc.

The upper z-index-* utilities (997, 998 and 999) can be used for modals, offcanvas sidebars, etc.

Positioning absolute and fixed elements

In conjunction with the absolute and fixed positioning utilities above, you can also control where the positioned element will be placed: in the top, right, bottom, or left of its parent element.

absolute top

absolute right

absolute bottom

absolute left

Each of the above affect positioning at all viewport widths. Plus there are xs:, sm:, md:, and lg: responsive tiers of each.

<div class="aspect-ratio-4x3 relative">
  <div class="box">
    <div class="absolute top w-100% flex flex-center">
      <label class="label bg-blue-200">absolute top</label>
    </div>
    <div class="absolute right h-100% flex flex-middle">
      <label class="label bg-red-200">absolute right</label>
    </div>
    <div class="absolute bottom w-100% flex flex-center">
    <label class="label bg-teal-200">absolute bottom</label>
      </div>
    <div class="absolute left h-100% flex flex-middle">
      <label class="label bg-green-200">absolute left</label>
    </div>
  </div>
</div>

Position sticky

sticky is used for making e.g. sidebar blocks or menu bars “stick” to the top of their containing block.

To see sticky being sticky, you will need to use it inside of a block that’s taller than the sticky element, or else it will not take effect.

There are two ways of setting the breakpoint width of when sticky becomes sticky:

Use one of the responsive sticky classes (xs:sticky, sm:sticky, md:sticky or lg:sticky
Alternatively, involve the sticky within a flex or grid layout

You are looking at grid being demonstrated here.

There are situations when you will want to prevent sticky doing its thing. E.g. if it is a sticky sidebar element, and the visitor is viewing your webpage on a phone or a screen that’s too narrow for the sticky to behave that way. For example, this demo has a sticky element that’s deliberately immobilized on small viewports – narrower than the grid system’s md breakpoint width (1024px default).

Look, I’m sticky on xs screens up!

<div class="grid xs:equal-3-cols">
  <div class="xs:cols-1-2" style="height: 500px">
    Main content ...
  </div>
  <div class="xs:col-3">
    <div class="sticky">
      Look, I’m sticky on small screens up!
    </div>
  </div>
</div>

Notes on position sticky

the example HTML code snippet above has some added height to the main column, so that if you copy-paste it, this will prove that it’s working. Delete the style="height: 500px" when you no longer need it.)
You may also need to add extra top distance in your CSS, to compensate if you have a position: fixed; element above the sticky element in your own design. (This has been necessary in the demo above, so that the sticky element isn’t tucked under the docs top-bar.)