Webflow allows you to set the 4 principal position values. By defaults all elements have the static value. Then you can change it to relative, absolute or fixed. Other values exist: inherit and initial. You can read about them here. Elements don't inherit the position value. As we're using position a lot for layout—that is moving elements around—inheritance of the position value would end up in a big visual mess.

Position:absolute, the best tool to move something exactly where you want

Let's take the badge example: 

• you have designed a card element. 
• It already containts a few elements, like a title, a text, an image, that are flowing in the HTML order.
• The structure is very simple, with an outer div called .card, containing an image a .title and a .text. 

You need to add a badge on top of all of that. Like a sticker you'd want to stick in one corner. So you add the badge after the other elements, click on position:absolute, and top-right corner, and your badge jumps to... an unpredicted position.

You try to change the place of the badge in the HTML structure with no effect.

It's not a bug, the badge goes where you told it to go. The badge just follows the rule:

An element using position:absolute is positioned relative to its first positioned parent

A positionned element is an element with a position value that is not static. So relative, absolute and fixed counts for being positionned.

In our case, the badge element checks its parents, one by one. Its first parent is .card. Is it positionned? No, it has the static default. So the badge continue to check upwards. Is it the .card-line div? Not either. Is it the .card-container? Yes. .card-container has position:relative. So the badge jumped up to the top right corner of this div because it is its first positionned parent, the closest ancestor of its hierarchy that has a position value defined.

To make the badge jumps where we want, we need to tell him what its new reference is: the .card element. We select the .card element and give it position:relative so that it becomes positionned. As we don't add any other value to that position, this has absolutely no visual effect on the .card element position. let's also click on that corner button that gives the Top and Right properties a value of zero each.

Now, the badge has jumped about where we want it to go: the upper-right corner.

It's good but we don't want it to touch the borders of the card. Let's use the Top, Left, Right and Bottom attributes to shift it a bit from the edges. Here we're using only Right and Top.

The badge is exactly where you want now.

Note that Webflow now knows that you want a gap of 10px between the badge and the edges. If you decide for another corner, then click the corners button and Webflow magically keeps your badge away from the edges by moving the displacement values.

Using z:index to ensure that an element is in front

Let's do an experiment to understand z:index, because depending where you badge element was placed in the structure, it may or may not be visible.

If your structure was the following, then your badge should be visible

If your badge was placed before the image in the structure, it may not be visible. Especially if the image has a position value, even with no z-index.

As HTML draws elements one by one, it drew the image after the badge, hence it being invisible.

We don't need to move the badge in the hierarchy. As it's a badge that's suppose to be on top, let's tell HTML that's it is above the rest, using CSS z:index.

You can give any digit value to z:index. The higher value gets the highest position on the z axis. It means it's on top.

In our example, as none of our elements has a z:index defined, the simple fact to add a value to one element makes it superior to the rest, and rendered on top. let's put 1.

And it's now on top. If you select the image and put z:index:2 to it, you'll see it's placed again in front of the badge.

That is the basics of z-index. It's in fact a lot more complex to use in certain cases.