Positioning for beginners (relative, absolute, fixed) – Webflow CSS tutorial (using the Old UI)

By | March 8, 2020


An element’s Position can be set in a number
of ways. This is really helpful when we’re creating
designs that require overlapping elements, or even elements that are persistently Positioned
on the viewport, regardless of your scroll Position. We’ll talk about these four: Auto (or Static),
Relative, Absolute, and Fixed. This is a quick crash course on these four. Let’s do Auto. This is what we generally refer to as the
“normal document flow.” (Elements stacking and wrapping like we’d
expect in a Word document). But for now, let’s do Relative Positioning. Three images side-by-side. Three paragraphs underneath. The second image, with Relative Positioning
we can move this left and right to partially overlap the other images. And what’s cool about Relative Positioning
is it doesn’t interrupt or mess with the normal document flow. It leaves a seat warmer in its place. Its spot is held and moving it isn’t messing
with other content. Let’s do this with the paragraphs. Same thing with Relative Positioning here. We can overlap other content without affecting
the normal document flow. Let’s do Absolute Positioning. Same setup as Relative here. But when we set this element to Absolute? It’s completely removed from the document flow. Yanked out. In this case, the image’s parent element has
its Position set to Relative, which means our Absolutely-Positioned image is Positioned
around that parent element. Finally, let’s cover Fixed. Fixed elements are Positioned around the viewport;
not their parent element. That means we can scroll down the page and
the Fixed elements stay Fixed — they stay where they are Relative to the viewport. So, auto (or Static) Positioning respects
the normal document flow. Relative Positioning lets us move our elements
around without messing with the document flow. Absolute Position positions content around
its parent element. And Fixed Position positions content Relative
to the viewport, persistently holding something where it is regardless of scrolling.

15 thoughts on “Positioning for beginners (relative, absolute, fixed) – Webflow CSS tutorial (using the Old UI)

  1. Baskaran S Post author

    Your Way Of Explanation Is Entirely Different From Others really awesome and outstanding..

    Reply
  2. FileMaker Beginner Post author

    Man that seat holder analogy with relative position was genius! Thanks

    Reply
  3. Arialwalker Post author

    What if the parent element is auto and the image is set to absoluute?

    Reply
  4. Arialwalker Post author

    also, what if the parent element is absolute and the child is relative?

    Reply
  5. Emanuel Rouse Post author

    What a phenomenal explanation of this concept. Very helpful.

    Reply
  6. Marian Lucas Post author

    I like how brief this is as it could work for someone who has heard about this subject before. However for someone with no or little knowledge the creator of this course talks to fast, and the animations are to quick as well…Something to consider for future Webflow videos maybe

    Reply
  7. Lorenzo Carolus Post author

    What if the parent doesnt not have a position for example relative???

    Reply
  8. Baad Taste Post author

    Great explanation of concepts but where do I find HOW to move these around???

    Reply
  9. Aminu Raji Post author

    how do i move a button element to my nav bar

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *