Relative position – Webflow CSS tutorial (using the Old UI)


Relatively Positioned elements are Positioned…relative
to their normal Position. In other words, they’re Positioned around
themselves. A relatively Positioned element unlocks a
ton of options for placement, but their original Position is preserved within the normal document flow. Once you set an element to relative Positioning,
you can use values for top, bottom, left, or right to move it around from its starting
Position, as well as adjust it’s z-index or stacking order. In this video lesson, we’ll cover two things. One sounds normal, and the other doesn’t. Overlapping…and Underlapping. For Overlapping, let’s take a look at this
section. Lots of images. They all have the same class applied, but
we’ll go into this one and create a combo class. Special. And what we’ll do next is set the Position
to relative. We can now adjust the Positioning here, and
we can see that our document flow isn’t interrupted. None of the other images are pushed around. What we also want to demo here is that if
we make other adjustments here, relatively Positioned elements will pull in front of
auto (or static) elements in the stacking order. That means relative content will usually stack
in front of other (auto) content. That leads us right into the next category… Let’s talk Underlapping. And we’ll select one of the other images here. Let’s create another combo class for this
one: Super. And we’ll go down and set the Position to
relative. Again, this will unlock z-index controls. Let’s type a value here of 1. Now it stacks on top of the other guy. If we go in and change that one? If we modify the z-index to be greater than one? It’ll stack on top of the other one. Select the other one? And choose an even greater number? You get the idea. So. Relative Positioning. Elements are Positioned relative to their
normal Position without messing with other content on the page.

2 Comments

Add a Comment

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