Hi Team,
question. For a future tutorial can you please consider going fully into depth and explaining Relative vs. Fix vs Absolute positioning. I am constantly confused by how to make a div positioned relative to it’s parent section (or another div for that matter). I would really appreciate if someone on the tutorial team could cover that for a solid 10 minutes on a full how to, since I’m clearly misunderstanding something simple here.
Devaun
Hello @ouve.
Relative, Absolute or Fixed positioning is standard CSS properties and webdesigners are using them not only in Webflow. You can probably find many different sources to learn more about it.
I tried to find short but understandable information for you:
Relative.
This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static (auto).
But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it’s position 10 pixels DOWN from where it would NORMALLY be.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn’t really work with statically (auto) positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element.
The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.
Absolute.
This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.
One of the most important thing to remember about absolute positioning is that these elements are not affected by other elements and it doesn’t affect other elements.
Fixed.
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect like element stick to the screen. Cool effect, can be useful, but needs to be thoroughly tested.
Hope it helps.
Regards,
Anna
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.