The positioning accordion houses one of the most important features of Designer Pro, called Float. Float is a web-design tool used to reposition things around a page. As long as an Element or Block has a width lower than 100%, they are able to float things to the left side (float left), the right side (float right), or the center of a page (Float none). Think of working similar to text-align.

Sometimes, if you have two elements next to each other that are set to 50% width, you can float one to the left and the other to the right to have them stack next to each other. But do know that in web-design, pages read from left to right, so as long as they are both floated left, and displayed: inline-block, they can neatly stack next to each other on the same line as well.

The positioning dropdown is where we can start to pull off some very advanced techniques. So buckle up. The options available to the designer are:

• Default
• Relative
• Absolute
• Fixed

Relative positioning is named appropriately because it is positioned relatively to its parent container. Once you position something Relative, you can now pinpoint where you want the Element or Block aligned by using a crosshair grid.

Absolute positioning means the element or block is positioned Absolutely in relation to the container it is being housed inside of. Just like relative positioning, you can pin an Element or Block to certain sides of the container by applying 0 values to any of the pixel crosshairs. The crosshairs represent the sides of the container. So, if you want to pin it to upper right-hand corner of a container, enter a zero into the right side of the crosshair as well as the top.

Our last form of positioning is Fixed. Fixed positioning is the most powerful as it positions elements and blocks in relation to the entire browser window. This feature is most commonly used to create sticky navigations that lock to the top or bottoms of event pages.

To learn how to create a fixed navigation, visit this article.

The last portion of the positioning tab is experimenting with Translating the X and Y axis and rotating the Element or Block. These are very advanced features only applicable to the most advanced web designers. We recommend avoiding these inputs at all costs unless you have a very specific use case. In that case, reach out to our team to make sure you are doing things correctly. 

To access articles on the other accordion tabs visit the links below:

The Background Tab

The Font Tab

The Width/Height Tab

The Margin/Padding Tab

The Border Tab

The Display Tab

The Properties Tab