Foundation CSS Prototyping Utilities Positioning

A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

In this article, we will learn about the foundation CSS prototyping utility Positioning. It is used to change an element's position value.

Foundation CSS Prototyping Utility Positioning Classes:

• position-relative: An element with "position: relative" is positioned relatively with the other elements which are sitting at top of it. If we set its top, right, bottom, or left, other elements will not fill up the gap left by this element.
• position-absolute: An element with "position: absolute" will be positioned with respect to its parent. The positioning of this element does not depend upon its siblings or the elements which are at the same level.
• position-fixed: Any HTML element with the "position: fixed" property will be positioned relative to the viewport. An element with fixed positioning allows it to remain at the same position even we scroll the page. We can set the position of the element using the top, right, bottom, left.
• position-fixed-top: This class allows to set the position to fixed. The top, right, left value becomes 0 which means div is located at the top.
• position-fixed-bottom: This class allows to set the position to fixed. Here, the bottom left and right value becomes 0 which means div is located at the bottom.
• position-static: HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.
   

Enabling Position:

@include foundation-prototype-position;

Syntax:

<div class="positioning-class"> Content </div>

Example 1: In this example, we will learn about classes fixed-top and fixed-bottom.

Output:

👁 Image

Example 2: In this example, we will learn about fixed and static. We will see, even after scrolling the webpage the content of the fixed div remain fixed.
 

Output:

👁 Image

Reference: https://get.foundation/sites/docs/prototyping-utilities.html#positioning