Hey! Free yourself to discover the 'magic' trick that will propel your business on the Web

Webflow positioning: Have the click and move the elements easily

Web Design,Freelance,Webflow
Webflow positioning: Have the click and move the elements easily

A whole range of website builder systems currently exist 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 codes and blocked by complex functions to understand, and yet, we have an overflowing creativity which waits for only one thing: "freedom". So today, I'm going to talk to you about one of them: the positioning of elements on Webflow.

To you the freedom of creation...


According to you, the best method to place or move an element is

The use of html, css, javascript code
The drag and drop functionality

Whether you use code or not, you should use the position.

It defines how an element is placed on a page. You will also need to enter numerical values(top, right, bottom, left) to this property.

In this guide, you will discover the notions about the position property (and other relative properties). After reading and practicing, you will finally be able to design a web site as you like on Webflow, by placing each element of a web page at the right place.

In fact, this is precisely why I decided to use Webflow, and not other site creation systems. I wanted beautiful and clean code.


Webflow, code and properties

Different kinds of position

Float setting

Clear property on Webflow


Webflow, code and properties

You may say that all other web designers allow you to move elements of a web page, because the features I'm about to explain are universal. It is CSS code that web developers and some web designers can manipulate.

But then, why Webflow?

I must admit that when I started, I didn't know anything about code. I tried a lot of website creation 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 basics of HTML and CSS. So I couldn't create a custom website exactly the way I wanted.

That's when I found out about 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 had to use code or even understand them. The modifications are done visually. I thought: why not? And here I am, a few years later.

With Webflow, it is obvious that you can fully use 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:

  1. Static
  2. Relative
  3. Absolute
  4. Fixed
  5. Sticky

Static position

This is the default position of an element. 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.

Relative position

To help you remember, a simple definition of the word "relative" may be enough. Something is said to be relative when it depends on something else.

Similarly, 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 relative to its initial position . To shift it, you just have to change the values of top, left, bottom and right.

This type of position is usually used when we want to adjust something.

Once the element in question is moved, it does not yet lose its original place. It still belongs to it. As for the other elements that surround it, they are not affected by the move. This is why it is possible that the different elements straddle each other.

Absolute position

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 element anywhere on a page (top right, top left, bottom or center...). Here again, you just have to modify the values of top, bottom, right and left. You should know that the movement is not necessarily made in relation to the whole screen. If the element is in a block, this block will be its reference when moving (this 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).

Fixed position

The fixed position is similar to the absolute one. The element can be placed anywhere you want. Only, it remains visible even when you scroll down the page (here is an example that you will probably encounter often: the menu bar that remains visible when you scroll down the page).

Sticky position

This position is a mixture of a relative position and a fixed position. In fact, the element remains on a relative position to the document flow until 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 bottom of the page (a point that you have also defined), the scrolling of the element stops.

In order for it to work, you must specify when this element will adopt the sticky position (the values top, left, bottom and right).

As this position is quite recent (it is the one that appeared last among all those mentioned), it is not yet compatible with some browsers. So, if you ever have a problem with your site on this point, be sure to check on other browsers first.

webflow positioning

Webflow positioning settings

Now let's get to the heart of the matter: how to configure these positions on Webflow?

Static position is not the issue here. As I explained very well earlier, it is the position of an element by default. The ones we are interested in are :

  • fixed webflow positioning
  • absolute webflow positioning
  • webflow sticky positioning

For each of them, you will have at your disposal :

  • Webflow positioning control
  • the relativity indicator
  • Z-index

Positioning control

What I love about Webflow is that everything is already set up (or almost). You will see for example predefined positions for absolute and fixed positions (top left, top right, bottom left, bottom right, left, right, top, bottom, full). It's as simple as clicking on the position you want.

Otherwise, you can always set it to custom values (for each side). These tips may 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; the same for the right)

Note: negative values are allowed. The element will then move in the opposite direction.

Relativity indicator

It is a marker that helps you to know in relation to which element the item is positioned. A reminder never hurts:

  • Relative position: the element is positioned in relation to itself.
  • Absolute position : the element is positioned in relation 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.
  • Position sticky: the element is positioned in relation 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 about it in the previous paragraphs.

Each element on your web page has a default Z value. By changing it, you can change the display order. The accepted number is a whole number between 1 and 2147483647. Whatabout negative numbers? They are also valid. Only, you risk losing the visibility of the element concerned.

In fact, the items added first are logically below the recent items. Those at the bottom of the page are stacked on top of those at the top. Similarly, those on the right are stacked above those on the left.

Then, statically positioned elements are always below the positioned elements (relative, absolute, fixed and sticky).

Float setting

This parameter can be modified in the style panel. What is it exactly? The closest example that comes to mind is the image that floats to the right of a text. This image is also surrounded by this text.

Moreover, this technique is used for some predefined components of Webflow: 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 make it float as its name indicates). This manipulation is delicate because it has an impact on the other surrounding elements. To access it, you have to go to the style panel.

However, be careful, the float does not work on an element with absolute position.

There are 3 types of float :

  • float none
  • float left
  • float right

Float none

It is the default setting. The element is therefore not floating.

Float 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.

Float to the right

You know the drill: the element will float to the right of the container or be declared to the right until it touches another element in float right.

Clear property on Webflow

To have even more control over the design of a website, the clear property is of great importance. Thanks to this property, you can prevent an element from being automatically positioned near a floating element; it will immediately move to the bottom. If you've been following along, you'll know that this property is used just after the float property.

Obviously, the clear setting does not apply to the floating element itself. That would be contradictory.

Like the float setting, this one is categorized in :

  • clear none
  • clear left
  • clear right
  • clear both

Clear none

This is the default value. If you activate it, there will be no impact on the element. It will remain positioned next to the floating elements.

Clear left

This prevents an element from being placed near elements with float: left property. The same applies to the clear right.

Clear right

This one prevents an element from being placed near elements with float : right property.

Clear both

This one prevents an element from being placed near elements with the 2 properties float : left and float : right.

Note here that the clear property will have a slightly different behavior 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 needs practice. That's why I invite you to play with these properties and see if by practicing you can better understand the utility of these properties.

Don't hesitate to share your creations in the comments or at upcoming events!


Make the counter explode to reach 1M subscribers together (Pssst...it's in real time)
Together it's more fun

1 Million with you.

It's really amazing how our YouTube community can be a true source of inspiration for all of us. So if you're looking for a community that will give you a boost to reach your personal and business goals, you've come to the right place!
Certified 100%
ULTRA enriching and hair-raising!
Receive a mountain of gifts


We all keep our childish soul, so we like to receive lots of gifts, a montaaaagne of gifts, a galaxiiiiiie of gifts, a.... YOUHOU, are you still with us? Since you also love gifts, receive in your mailbox energy, strategies and tools (each one more grandiose than the other) that will generate results in your business.


Clearsome time for Thursday because an intergalactic surprise awaits you.
Propel your life & your business in 30 days!


The only one, the only one, the real one where all ideas can germinate, develop and succeed. Each phase of business development is thought out down to the smallest detail (even the smallest) to accompany you in your project.

Foundations, development, support, mutual aid, coaching, website, web tools and even cookies. Joining the Happy.webacademy is to be part of this ecosystem without risk, just jump in and let yourself be guided.
AI enabled to accelerate your transformation 🤖
12 Up-to-date modules
We give you crazy training with action plans, regular updates, access for life, and 24/7 support, 365 days a year. Everything you need (and more) to make your life, your business and your skills shine.
Your thruster
We make sure that you are always on top of your questions and that you can grow with a community that has the same dreams as you, and that you can meet super inspiring people.
Never again alone
Your Website!
Who better than Web experts to create a turnkey Website and sell your offers quickly without having to break your head with the technique. No more sleepless nights tearing your hair out, we've got you covered to accelerate your online growth!
We will create you
an Asteroid
12 months Free
We answer all your business, mindset and nugget questions. It's also the best way to get your daily dose of motivation, anything is possible!
Don't forget to bring
Strategy 3.0
The Web and e-commerce are evolving at an incredible speed, and if you don't keep up, you'll lose money. That's why we're going to share with you all our latest tips, discoveries and innovations (automation, artificial intelligence,...) so that you and your business stay on top!
2 Business Coaches
Kevin & Sophie, 2 coaches in the field for 10 years who will be there to motivate you, boost your mindset, and much more! Throughout your entrepreneurial adventure on the Web & in e-commerce, we will support you to validate opportunities or help you optimize your performance. You will NEVER be alone again!
Continuous monitoring
It's sometimes hard to take a step back from your work when you're just starting out (even after), which is why we'll always be there to review your work privately BEFORE you spend any money on advertising or influencers.
Creating a profitable business requires financial optimization. That's why we'll give you the tips we use so you can learn how to invest the money you'll earn in the long run to create wealth.