Layout

Block positions

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

Types of block positioning

Carbon has utility classes for several types of block positioning:

  • relative
  • absolute
  • fixed
  • static
  • sticky

There are a z-index utilities that can be used for layering:

z-0 through to z-10, z-important, z-auto

The lower z-* utilities are used for dropdown panels, stacking text (title, call-to-action, etc.) over images, tabs, and whatever is needed to be on different “layers”. We alias these classes for clearer use: z-dropdown, z-backdrop, z-modal, z-offcanvas.

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.

Each of the above affect positioning at all viewport widths. Plus there are responsive tiers of each.

<div class="bg-neutral aspect-ratio-4:3 relative">
  <div class="box">
    <div class="absolute top w-100% flex justify-center">
      <label class="label bg-acent">absolute top</label>
    </div>
    <div class="absolute right h-100% flex items-center">
      <label class="label bg-accent">absolute right</label>
    </div>
    <div class="absolute bottom w-100% flex justify-center">
    <label class="label bg-accent">absolute bottom</label>
      </div>
    <div class="absolute left h-100% flex items-center">
      <label class="label bg-accent">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.

I’m sticky

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:

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

There are situations when we want to prevent sticky... sticking. E.g. if it is a sticky sidebar element, and the user is viewing our app on a phone or a screen that’s too narrow for the sticky.

<div class="bg-neutral has-sidebar">
  <div class="sticky p-3 bg-notice" style="inset-block-start: 80px;">
    I’m sticky
  </div>
  <div class="p-block">
    <p>Main content....</p>
  </div>    
</div>

Notes on position sticky

We may also need to add extra top distance in our CSS, to compensate if we have a position: fixed; element above the sticky element. This has been necessary in the demo above, so that the sticky element isn’t hidden under the docs top-bar.