Position

Base Foundry stack | New in Foundry v2

Gain control of positioning elements using CSS's absolute positioning. The Position stack allows you to place content relative to its parent stack for customizable layouts.

  • Build advanced layouts
  • Use percntage or pixel based sizing
  • Create different designs at each breakpoint
  • Style elements differently at each breakpoint
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

The stacks in this section have been positioned using CSS' absolute positioning to place them in specific spots. If you resize the browser you'll notice that these positions vary at different breakpoints. Give it a shot!

Space Man

This content is centered horizontally and vertically using 50% offsets and a horizontal and vertical -50% translate.

Image
Image

Using Position v2

The Position stack is an advanced layout tool. It consists of two parts — the main containing stack and its child stacks the Position Items.

The main stack contains the positioning items and determines the size of the overall positioning area.

The positioning items determine where your content is placed within the main parent stack as well as the individual content's sizing, background, etc.

We highly encourage you to watch the tutorial video above to learn the basics of using the Position stack.

Sizing

Mobile, Tablet & Desktop Height
You are able to set the height of the Position stack differently at each responsive breakpoint. In addition to setting individual heights at each of the breakpoints you can also choose the height type at each breakpoint, opting for either a view height (VH) setting or a pixel-based (PX) setting. View Height is a percentage based height based off of the height of the visitor's browser window.

Position Background

Mobile, Tablet & Desktop Style
Position allows you to choose a different background style for the stack at each of the three responsive breakpoints. You can use Foundry's preset color options, or other custom selections. Each breakpoint offers the following style options:

  • None
  • Primary
  • Success
  • Info
  • Warning
  • Danger
  • Custom (Solid Color)
  • Custom (Gradient)
  • Image (drag-and-drop)
  • Image (remote)

Horizontal & Vertical Origin
When choosing either of the Image styles for you background you can use the Horizontal & Vertical Origin controls for setting where the center point of your image.

Advanced

Hide Overflow
Allows you to hide overflowing elements from the Position stack at each of the three breakpoints. Most times you will want to have Hide Overflow enabled for all breakpoints.

Child Stack

Position Item

The Position Item child stack allows you to insert your own content and use the child stack's controls to position that content within the main Position stack.

There are detailed controls for each breakpoint. The controls allow the same options to be set for the Mobile, Tablet and Desktop breakpoints, but you may also opt to have the Tablet inherit its settings from Mobile and Desktop inherit from Tablet in the mobile first approach.

Mobile, Tablet & Desktop

Mobile, Tablet & Desktop Width
Set the width of the Position Item child stack at each breakpoint. You can choose between Percentage or Pixel based widths.

Percentage based widths are calculated relative to the main parent stack.

Example

If you choose a 10% width for for the child stack and the main parent stack is 1,000 px wide then the child stack will be 100px wide. That said, since we're working within a responsive environment, as the parent stack's width changes, so will the width of the child stack relative to the parent.

Mobile, Tablet & Desktop Height
Allows you to set the height of your child stack. You're able to choose from three different options at each breakpoint — Pixel based, Percentage based, or Flexible.

The Flexible height setting changes based on its contents. As the content's height within the child stack changes so will the child stack's own height.

Much like the width setting the percentage based height is calculated relative to the main parent stack.

Example

If you choose a 10% height for for the child stack and the main parent stack is 1,000 px tall then the child stack will be 100px tall. That said, since we're working within a responsive environment, as the parent stack's height changes, so will the height of the child stack relative to the parent.

Mobile, Tablet & Desktop Horizontal Origin
Allows you to choose where the horizontal origin point for the child stack will be — either the left- or right-hand side of the parent stack. The child stack will be offset from that side horizontally using the Horizontal Offset value you provide.

Mobile, Tablet & Desktop Horizontal Offset Type
You can choose to use a Percentage or Pixel based offset type for your child stack. This determines how the distance from the origin location will be set.

The Pixel based option is a fixed value that does not change relative to the parent stack's width.

The Percentage based option offsets the child stack from the origin by a percentage. The percentage is relative to the width of the main parent stack.

Example

If you choose a 10% offset for for the child stack and the main parent stack is 1,000 px wide then the child stack will be 100px offset from the origin. That said, since we're working within a responsive environment, as the parent stack's width changes, so will the offset of the child stack relative to the parent.

Mobile, Tablet & Desktop Horizontal Offset Value
This is the distance of your horizontal offset from the origin point.

Mobile, Tablet & Desktop Vertical Origin
Allows you to choose where the vertical origin point for the child stack will be — either the top of bottom of the parent stack. The child stack will be offset from that side vertically using the Vertical Offset value you provide.

Mobile, Tablet & Desktop Vertical Offset Type
You can choose to use a Percentage or Pixel based offset type for your child stack. This determines how the distance from the origin location will be set.

The Pixel based option is a fixed value that does not change relative to the parent stack's height.

The Percentage based option offsets the child stack from the origin by a percentage. The percentage is relative to the height of the main parent stack.

Example

If you choose a 10% offset for for the child stack and the main parent stack is 1,000 px wide then the child stack will be 100px offset from the origin. That said, since we're working within a responsive environment, as the parent stack's height changes, so will the offset of the child stack relative to the parent.

Mobile, Tablet & Desktop Vertical Offset Value
This is the distance of your vertical offset from the origin point.

Mobile, Tablet & Desktop Drop Shadow
When enabled a drop shadow will be applied to the child stack. You can enable / disable this at each breakpoint. When enabled you can se the Shadow Size, Vertical & Horizontal Shadow Offset and Shadow color.

Mobile, Tablet & Desktop Translate
The Translate settings are relative, percentage based adjustments to the positioning of the child stack. If enabled the child stack will be moved horizontally and vertically based off of your values you provide.

The translate values move the child stack relative to the height / width of the child stack itself.

Example

If the child stack is 200 px wide and the translate setting's are -50% horizontal and -25% vertical then the child stack will be moved to the left 100px as well as upwards by 50px. That said, since we're working within a responsive environment, as the child stack's height and width changes, so will the translate values of the child stack.

Example

To center the child stack in the very middle of the main parent stack you could set your both Horizontal (left) and Vertical (top) Origin Offsets to 50% and your Horizontal and Vertical Translate values to -50% as well.

This would offset the child stack 50% from the left and top of the parent and then translate the child stack left and upwards 50% of its own width and height.

Mobile, Tablet & Desktop Rotate
When enabled you can choose to rotate the child stack up to 360° in either direction. To rotate to the right provide a positive number, to rotate to the left use a negative number.

Mobile, Tablet & Desktop Style
This setting allows you to set a background style for your child stack. In the Mobile settings you can use either Foundry Preset Colors from the main Control Center, Custom solid or gradient colors, or an image. The Tablet and Desktop settings can either Inherit these settings or choose their own Custom Colors or Image.

The Tablet and Desktop background Styles only have access to the Foundry Preset Colors buy Inheriting them from Mobile. Otherwise they can set their own custom options.

Mobile, Tablet & Desktop Z-Index
This feature allows you to adjust the layering of elements within the parent stack. Higher values bring an element closer to the top of the stack.

Mobile, Tablet & Desktop Hide Overflow Content
This keeps the content within your child stack from overflowing the bounds of the child stack itself. This will most times be left enabled.

Insight
Inheriting Settings

By default each position item inherits its Tablet and Desktop settings from the Mobile settings group. This means the positioning for the individual items will be the same at each breakpoint. You can however turn off the inherit feature to give each breakpoint its own unique positioning, as well as other individual position item features.