A whole range of website creator systems currently exists on the market. As you know, my favorite tool is Webflow. And as a web designer, we like the visual side of things. We don't want to write lines of code and get stuck by functions that are complex to understand, and yet we have an overflowing creativity that expects only one thing: "freedom". So today, I'm going to talk about one of them: the positioning of elements on Webflow.
Your creative freedom...
In your opinion, the best method for placing or moving an element is
Drag and drop functionality
Whether you use code or not, you will have to use the property position.
It defines how an element is placed on a page. You will also need to enter numerical values(top, right, bottom, left) for this property.
In this guide, you will discover the notions about the property position (as well as other related properties). After reading and some practice, you will finally be able to design a website as you want on Webflow, by placing each element of a web page in the right place.
In fact, it is precisely for this reason that I decided to use Webflow, and not other site creation systems. I wanted beautiful and clean code.
Webflow, code and properties
You might tell me that all other web site creators allow you to move elements of a web page, because the features I'll explain to you later are universal. It's CSS code that web developers and some web designers can manipulate.
But then, why Webflow?
I must confess that when I started out, I knew nothing about the code. I tried a lot of web design systems, but I couldn't find the one that really suited me. It's true that I could create websites on these other systems, but when I wanted to go further, I discovered that I had to master even the HTML and CSS bases. So I couldn't create a custom website, exactly as I wanted.
That's when I became aware of the existence of Webflow, the website creation software for webdesigners! To build a website, you just have to use the drag and drop function. In no case, I was not led to use code or even to understand them. Modifications are done visually. I thought: why not? And here I am, a few years later.
With Webflow, it is therefore obvious that you can make full use of the different properties that I will discuss in this article. They are even easier on Webflow.
Webflow positioning: which ones?
In all, 5 types of positions are used to design a website:
This is the default position of an item. Every element you insert on a web page will automatically have this position. In more technical terms, we can say that the element in question follows the normal page flow.
To help you remember, a simple definition of the word "relative" may suffice. We say that something is relative when it depends on something else.
In the same way, an element has a relative position when it (or more precisely, its position) is a function of something else (and therefore of its normal position). Let me explain: the element in question can be shifted, but with respect to its initial position . To shift it, just change the values of top, left, bottom and right.
This type of position is usually used when you want to adjust something.
Once the item in question is moved, it does not yet lose its original place. It still belongs to him. As for the other elements that surround it, they are not affected by this displacement. This is why the different elements may straddle each other.
When you drag an element onto a web page, it immediately takes a static position (the default position, as I explained earlier). However, this position does not necessarily suit the design of your site. You have to move the element. This is where the absolute position comes into play.
This function allows you to place an item anywhere on a page (be it top right, top left, bottom or center). Here again, just change the values of top, bottom, right and left . You should know that the move is not necessarily made in relation to the whole screen. If the element is in a block, this block will be its reference during the displacement (which is valid even if this block is placed in a fixed, relative or absolute position).
What happens if 2 elements are placed in absolute at the same time? They might overlap, unless you use the z-index property (I'll explain it later).
The fixed position looks like the absolute one. The element can be placed anywhere you want. Only, it remains visible even when you scroll down the page (here's an example you probably come across often: the menu bar that remains visible when you scroll down the page).
This position is a mixture of relative position and fixed position. Indeed, the element remains on a position relative to the document flow up to a certain point. It then takes on the behavior of a fixed element, i.e. it remains visible even if you scroll further down the page. Then, when it reaches the footer (a point that you will also have defined), the scrolling of the element stops.
For it to work, you need to specify when this element will take the sticky position (the top, left, bottom and right values).
As this position is quite recent (it is the last one among all those cited), it is not yet compatible with some browsers. So, if you ever encounter a problem with your site on this point, first make sure to check on other browsers.
Webflow positioning parameterization
Let's now get to the heart of the matter: how to configure these positions on Webflow?
The static position is not in focus here. As I explained very well earlier, this is the default position of an element. The ones we're interested in are more like:
- fixed webflow positioning
- absolute webflow positioning
- sticky webflow positioning
For each of them, you will have at your disposal:
- Webflow positioning control
- the relativity indicator
What I love about Webflow is that everything is already (almost) ready. For example, you'll see predefined positions for absolute and fixed positions (top left, top right, bottom left, bottom right, left, right, top, bottom, full). It's as easy as clicking on the position you want.
Otherwise, you can always set it to custom values (for each side). These tips can also help you:
- Top: by increasing the value, you push the element down (from the top; same for the bottom).
- Left: by increasing the value, you push the element to the right (from the left; same for the right)
Note: Negative values are allowed. The element will then move in the opposite direction.
This is a marker that helps you to know in relation to which element the concerned element is positioned. A booster shot never hurt:
- Relative position: the element is positioned in relation to itself.
- Absolute position : the element is positioned relative to a parent element, which must have another position apart from static.
- Fixed position: the element is positioned in relation to the body of the page and remains visible.
- Sticky position: the element is positioned relative to a parent element (the body of the page in most cases).
Z-index is the position of an element on the imaginary Z-axis. I told you a little bit about it in the previous paragraphs.
Every item on your web page has a default Z value. By modifying it, you can change the display order. The accepted number is an integer from 1 to 2147483647. Whatabout negative numbers? They are also valid. However, you may lose the visibility of the item in question.
In fact, the items added first are logically below the recent items. Those at the bottom of the page therefore stack up above those at the top. Similarly, those on the right stack above those on the left.
Then the elements with static positioning are always below the positioned elements (relative, absolute, fixed and sticky).
Setting the Float
This parameter can be changed in the style panel. What exactly does it consist of? The closest example that comes to mind is the image floating to the right of a text. This image is also surrounded by this text.
Moreover, this technique is used for some predefined Webflow components: column, collection list, etc.
In short, the float allows you to take an element out of the normal flow of a page (or more simply, to float it as its name suggests). This manipulation is delicate since it has an impact on the other surrounding elements. To access it, go to the style panel.
Be careful however, the float does not work on an element with absolute position.
There are 3 types of float:
- float none
- left float
- right float
It is the default setting. The element is therefore not floating.
Float on the left
The element will obviously float to the left of the container. Otherwise, it will be shifted to the left until it touches another element in float left.
You know the refrain: the element will float to the right of the container or will be declared rightuntil it touches another element in float right.
Property Clear on Webflow
In order to have even more control over the design of a website, the clear property proves to be of paramount importance. Thanks to it, you can prevent an element from automatically positioning itself next to a floating element; it will immediately move to the bottom. If you have followed it correctly, you will know that this property is used just after the floatproperty.
Obviously, the clear setting does not apply to the floating element itself. This would be contradictory.
Like the float setting, this one is categorized as :
- clear none
- clear left
- clear right
- clear both
This is the default value. If you enable it, there will be no impact on the item. It will remain positioned next to the floating elements.
This prevents an element from being placed near elements with float: left property. The same applies to the clear right.
This prevents an element from being placed near elements with float: rightproperty.
This prevents an element from being placed near elements with the 2 properties float: left and float: right.
Note here that the clear property will behave slightly differently depending on whether it is applied to non-floating elements or to elements that are already floating.
In short, I can understand that the positioning mode is at first sight complex and requires practice. That's why I invite you to play with these properties and see if by practicing you can better understand their usefulness.
Don't hesitate to share your creations in comments or at upcoming events!