Position Utilites

Fizz's position utilites allow you to adjust the position of elements within a page. Most positioning is baked into specific patterns, but if you find yourself wanting to set position on something using a Fizz utility, these are available. The one you'll probably most commonly use is .fizz-relative to set the positioning context for a pattern that includes a different position value than the default.

Relative

Elements with position: absolute/sticky will be positioned relative to the next highest element in the DOM with a position applied. By default, they will be positioned relative to the body element. You can change the context for where an element is positioned by applying the .fizz-relative class.

Applying top/bottom/left/right to relatively positioned elements will adjust their position relative to their normal position within the document without removing it from the flow of the document. Take care not to position elements such that they unintentionally overlap other elements.

Absolute

Use .fizz-absolute to remove an element from the flow of the document and position it within the body, or the next highest parent with a position value set. Typically, you'll want to add .fizz-relative on a parent container to set the context for an element's position.

Position Absolute Example

HTML

<div class="fizz-card fizz-bordered fizz-inset-square-16 fizz-relative">
  <button class="fizz-absolute" style="top: .25rem; right: .25rem">This is positioned absolutely</button>
  <p class="fizz-heading-3">Position Absolute Example</p>
  </div>

Sticky

Use .fizz-sticky to toggle an element's position between relative and fixed, based on the user's scroll position.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed nobis magnam maiores quia tempore quae nostrum commodi at! Necessitatibus facilis quaerat nemo sit sunt qui nulla magnam voluptas accusamus reprehenderit!

This element is sticky

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officia quod dignissimos reprehenderit voluptates quas quae ab temporibus, ipsum consectetur sequi corporis rem harum ad, eligendi laudantium, voluptatum porro vel!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci deserunt dignissimos possimus quam, facilis harum dolorem eum, odit ratione officiis blanditiis, itaque voluptate iure repellat rem ab similique? Eligendi, vel.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis fuga, error ratione voluptas facilis temporibus. Tempore veritatis officiis ad optio, quo nihil doloribus at? Asperiores autem incidunt alias omnis fugiat!

HTML

<div class="fizz-card fizz-bordered fizz-flow-16 fizz-inset-square-16" style="width: 300px; height: 400px; overflow: auto">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed nobis magnam maiores quia tempore quae nostrum commodi at! Necessitatibus facilis quaerat nemo sit sunt qui nulla magnam voluptas accusamus reprehenderit!</p>
  <div class="fizz-surface-yellow fizz-inset-squish-16 fizz-sticky" style="top: 0">
    <p>This element is sticky</p>
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos officia quod dignissimos reprehenderit voluptates quas quae ab temporibus, ipsum consectetur sequi corporis rem harum ad, eligendi laudantium, voluptatum porro vel!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci deserunt dignissimos possimus quam, facilis harum dolorem eum, odit ratione officiis blanditiis, itaque voluptate iure repellat rem ab similique? Eligendi, vel.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis fuga, error ratione voluptas facilis temporibus. Tempore veritatis officiis ad optio, quo nihil doloribus at? Asperiores autem incidunt alias omnis fugiat!</p>
</div>

Fixed

Use .fizz-fixed-top or .fizz-fixed-bottom when you want to fix an element's position to the top/bottom of the viewport. You may need to use JavaScript to apply margin equal to the height of the fixed container to the element above/below to prevent the content from being overlapped, as setting position: fixed to an element removes it from the flow of the document.

This is fixed to the top of the viewport.

This is fixed to the bottom of the viewport.

HTML

<style>
  /* this margin is hard-coded here but you would want to use JavaScript to apply a margin value equal to the height of the fixed element. */
  .fizz-styles body {
    margin: 40px auto;
  }
</style>

<div class="fizz-fixed-top fizz-surface-yellow fizz-inset-squish-16">
  <p>This is fixed to the top of the viewport.</p>
</div>

<div class="fizz-fixed-bottom fizz-surface-yellow fizz-inset-squish-16">
  <p>This is fixed to the bottom of the viewport.</p>
</div>