Position property - positioning elements on the page
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

Position property - positioning elements on the page

CSS positioning is a type of styling used to control how elements are displayed on a web page and a way to make your site responsive. It allows you to set the exact location and size of an element, as well as its relationship to other elements.

 

To start using this function, you should know its properties - you will learn them in this tutorial.

Position property values

There are five different position values:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Static position

Example of static position

This is the natural positioning of an element. It defines the position of a given field essentially as an unpositioned element - it flows in the normal sequence of the page. The static position is not affected by the X and Y coordinate properties.

Relative position

top right
top center
top left

Example of relative position

In the BOWWE wizard, relative position is the default property when adding a new element to an empty area. All elements with this property are dependent on each other. This means that a change made to one of them also affects the others.

When you drag and drop new elements in the wizard, you will notice green markers - they will help you designate against which objects the element will be positioned relatively and in which container it will be placed.

Before you drop a widget, you can also adjust the markup using the arrows on your keyboard (left/right).

Relative elements work together, which makes it much easier to work on the page and improve its performance. Therefore, using relative positioning is a recommended practice. Specific relationships create a context that allows search engines to easily understand your site and benefit SEO.
To specify in detail what place the widget should occupy on your page, adjust the starting point and edit the X and Y coordinates.

Absolute position

Example of absolute position

Write short title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac arcu pulvinar, pulvinar nisi non, sagittis enim. Duis aliquam, massa non vehicula suscipit, lectus dolor ullamcorper massa, in rutrum neque urna at odio. Suspendisse sodales nulla eu purus fringilla, sed scelerisque libero mattis. Aliquam sollicitudin lectus at vulputate consequat.
Absolute position will be suitable when you want to place an element in a non-standard location, or when you want the element to be independent of other elements on the page.
A widget with an absolute value will be positioned relative to its nearest positioned parent, if one exists; otherwise relative to the initial container. To determine the exact location of the element, adjust it using X and Y coordinates.

Remember about:

Elements with absolute and fixed positions are removed from the normal flow of the page (normal flow). This means that regardless of the defined structure, they can take any position and overlap other elements, and their size does not affect the size of their parent.

 

The values you give to elements may not display the same on all devices, so it is very important to keep in mind the responsiveness of your site.

Fixed position

Write short title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac arcu pulvinar, pulvinar nisi non, sagittis enim. Duis aliquam, massa non vehicula suscipit, lectus dolor ullamcorper massa, in rutrum neque urna at odio. Suspendisse sodales nulla eu purus fringilla, sed scelerisque libero mattis. Aliquam sollicitudin lectus at vulputate consequat.

Read more

Example of fixed position

Write short title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac arcu pulvinar, pulvinar nisi non, sagittis enim. Duis aliquam, massa non vehicula suscipit, lectus dolor ullamcorper massa, in rutrum neque urna at odio. Suspendisse sodales nulla eu purus fringilla, sed scelerisque libero mattis. Aliquam sollicitudin lectus at vulputate consequat.

Read more

Elements with a fixed position are positioned relative to the browser window and will not move in the working window, even if the page is scrolled. This can be useful for creating elements that remain in a fixed position on the screen, such as menus, pop-ups or footers that stay at the bottom of the page.

Sticky position

Example of sticky position

Write short title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac arcu pulvinar, pulvinar nisi non, sagittis enim. Duis aliquam, massa non vehicula suscipit, lectus dolor ullamcorper massa, in rutrum neque urna at odio. Suspendisse sodales nulla eu purus fringilla, sed scelerisque libero mattis. Aliquam sollicitudin lectus at vulputate consequat.

Write short title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac arcu pulvinar, pulvinar nisi non, sagittis enim. Duis aliquam, massa non vehicula suscipit, lectus dolor ullamcorper massa, in rutrum neque urna at odio. Suspendisse sodales nulla eu purus fringilla, sed scelerisque libero mattis. Aliquam sollicitudin lectus at vulputate consequat.
Another possible positioning value is sticky, which allows an element to behave like a fixed-position element until a certain threshold is reached, at which point it will become stationary relative to the browser window and remain there as the user scrolls (it will become a fixed-position element).
An element with sticky positioning will be positioned as normal until the user scrolls the browser window far enough that the element would normally be scrolled out of view. At that point, the element will be "stuck" to the specified part of the window and will remain there as the user continues scrolling.
You can specify the distance from the top edge of the browser window at which the element should become "sticky" using the top, bottom, left and right properties and the X and Y coordinates.
Watch out

Not all the browsers support sticky position, so you may need to use a fallback solution to ensure that it works consistently in all browsers

Editing coordinates X & Y

When specifying the position of an element on the page, its position is determined against a fixed point called the origin (0,0). The horizontal offset is called the X coordinate, where a negative value indicates the position to the left of the origin and a positive value to the right of the origin. The Y coordinate, on the other hand, determines the vertical displacement, for a negative value the position above the beginning, and for a positive value the position below. 

 

To control the coordinates you can choose from a variety of units - read out tutorial about CSS units to learn more about them.

 

In BOWWE, it is possible to change the orientation of the origin point using the grid property found in the Position tab. 

 

Example:

The "top right" option will set the starting point at the top right corner.

Z - index

Z-index allows you to specify how positioned elements should overlap. 

 

This property takes integer values (positive or negative) that represent the element's position along the z-axis. If you are not familiar with the z-axis, imagine that a page has several layers one above the other and each layer is numbered. 

 

  • The layer with the larger number is rendered over the layers with the smaller number. In other words, the elements with the larger z-index value are "closer to you" than the others.
  • If the elements have the same z-index then the last one added to the page will cover the previous one. You can check the order of the elements using the Widget Tree.

Congratulations!

Now you know how to use position property on your website