Streaming live at 10am (PST)

Setting position


#1

Hi there, Could someone once and for all explain me what difference these make ? I hope you know what I mean. (I use morin-huur site as example)
1.


2.

3.

Any help is appreciated.


#2

Hi, to begin with, realize that the Style panel of Webflow relys almost entirely to CSS rules, so you can start to read here:

http://www.w3schools.com/css/css_positioning.asp

So, Auto doesn't exist, it could be called Static. it means the elements is positionned in the flow of other elements... after the precedent, before the following.

Relative positions it relatively to the static position. So in your 3rd image, it's 20 px upper than Static. Relative is also used as is with no other value. Changes nothing but the element is considered "positionned" and used as a reference for any child element positionned absolutely.

Absolute is positionned regarding the closest positionned parent (read above)

Fixed is positionned regarding the browser or viewport.


#3

I had to read that at least five times to understand it :smiley: Thank you very much for explanation.

Changes nothing but the element is considered "positionned" and used as a reference for any child element positionned absolutely.

But still cant imagine how the difference look like in real life. Where i can see it takes change of using these variety of positioning ?
I mean i understand how it works now, but can i achieve the same goal with any of these types of position ?


#4

See how you can move up a div using relative but it doesn't affect the other elements. See how using negative margin does the same but allow the other elements to move along.

Now see how the absolute positionning take the closest positionned parent as a reference. To begin with, the green block takes Body as a reference because it's the closest positionned (by default) parent. Then when we set Relative on the orange dic, it doesn't change anything on itself but affect the green div positionning.


#5

Also made this page a while ago for users to be familiar with what nested and siblings mean. It's related so here it is.

http://sab.webflow.io/nested-siblings


#6

Great ! I am so grateful for this. That´s exactly what i wanted. Thank you !


#7

Feri, if you master the Absolute positioning rule, you'll master Webflow :smile:


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.