Positioning controls give us nearly unlimited
flexibility when creating modern layouts for the web. There are six here that we’ll cover (static,
relative — including z-index...absolute, fixed, sticky, and floats) and in just 10
minutes, we’ll teach almost everything related to positioning. And we’ll use practical examples we can
apply to our designs. With the leftover time, we’ll read together
from the novelization of Star Trek: Insurrection. Up first is static. And now we’ll cover static positioning. Static is just the default. When you drag something in (whenever you add
a thing anywhere in your project), it’s static. Things are positioned using the box model. That is (as we know) — things stack on top
of each other or next to each other based on what kind of element it is (and what its
DISPLAY setting is in Layouts). And for most designers (for most basic designs),
statically positioned elements (the default) is okay. But what happens when we want to change things? So. Let’s talk about our first non-static position. And that’s relative. A relatively positioned element is JUST like
a static element, but you can move it around from its default place. And when you do (notice the other content
on the page) — it doesn’t affect the document flow. (It’s like there’s a seat warmer in its
place; its spot in the document is preserved). That’s what it means when we say this element
is relative to ITSELF. (You’re positioning it relative to its static
— its DEFAULT position.) Of course, you can click in and positiAon
using presets, or you can type in a value in pixels, percentages, VW (we cover a lot
of these units in Size, so check that out if you haven’t already). But relative goes further: because notice
how we’ve unlocked a ton of control here. Whether or not you’re using relative to
move things, you can also set z-index. And it’s called z-index because it controls
stacking in front of or behind what someone sees on the screen (that’s our z-axis). And two important things to consider here:
z-index DOES control stacking, but it doesn’t control actual MOVEMENT along the z-axis. And the second thing is: z-index trivia is
a great conversation starter at parties. So if we have a collage of photos? (We’ve just moved these around — you can
see the position on each of them has been manually changed using relative positioning.) And by default, sibling elements (things that
appear on the same level UNDER other things in the Navigator) — things that come AFTER
others stack on TOP by default. But if we WANT one of them on top of the others? We’ll just go in (again, we already set
these to relative), and we’ll change the z-index...to 1. Now it stacks on top. If we want THIS one on top of that? We set it to 2. Let's select the left one and set the z-index
to 2. What's going to happen? Well, like we learned in AP Calculus, 2 is
greater than 1. So of course, it'll stack above. Same thing with THIS one. (The higher the number? The higher it stacks.) Also, if you have two elements, both set to
Static (just default positioning)? The moment you SET something to NOT Static
(any of these others here), the selected element will stack on TOP of static elements. If you want the other one to stack on top? You know what to do. Set it to relative (now you’ve unlocked
z-index), and now we can stack it on top. But here’s the catch with z-index. It’s NOT global. If we have two elements (each of these elements
has children), z-index WILL control stacking for those parent elements. But if element A has a HIGHER z-index than
element B? The CHILDREN of element B will never overlap
any part of element A. Even if the z-index is 3 trillion. But that’s relative positioning. Let’s unlock even more options with absolute
positioning. And here’s our first big difference: absolutely
positioned elements are no longer part of the document flow. They DON’T leave a seat warmer, and they
only push off of what you tell them to push off of. And here’s how we’ll show that: Let’s set the top value here to 0 and then
let’s set the left value here to 0. Notice how the absolutely positioned element
is now placed way on the top-left of the BODY element. But here’s where we have all sorts of control:
we can CHOOSE from these presets to position something, again, relative to the Body, but
we can also constrain all of this. In our Navigator, we can see our body has
a section in it (well, several sections, and a footer, and a small image of Daniel Craig). What we just demonstrated is that absolutely
positioned elements will position themselves around the Body element, but all we have to
do if we want our element to be positione d around our section? Is set the section...to relative. That’s because absolute positioning looks
up the element hierarchy (it looks for the first thing it finds that’s not set to Static)
...and it positions itself around THAT. But while the CONCEPT makes sense, this isn’t
really practical here. That’s because absolute positioning is MORE
OFTEN used by designers when we don’t want WHATEVER item we’re positioning to MESS
with the rest of the document flow. So how can we tie this together with a practical
user interface? Here’s a div block inside an interface (this
is just a div block — the whole window here is sort of functioning as a popup modal. And the div block INSIDE (the one housing
our three circles) is positioned, by default, using Static positioning). Let’s select that block, and first, let’s
demonstrate that as we move this throughout the modal (throughout this window)? It’s pushing other stuff around. (That’s static behavior.) But what if we position it absolutely? Well, it’s no longer pushing things around. And if we set it to 0 pixels from the top? And for this, 0 pixels...from the RIGHT? Now it’s on the top right corner of the
BODY (it’s positioned around our whole page now). But we can do one thing to bring it back to
the WINDOW (back to the sort of popup modal itself). We can set the div block (the modal here)...to
Relative positioning. And if we decide we want our controls on the
left? More of a macOS alignment? With our div block of circles selected, we
can just set it to 0 pixels from the left. And this is really practical (we can USE absolute
positioning on things like popup modals) — any time we want something to show up where it’s
positioned around a PARENT element. But just like that...we built an operating
system. Except no...we didn’t. We’ll come back to absolute positioning
in just a few moments, but for now, let’s cover fixed positioning. If absolutely positioned elements are perfect
for positioning things around other elements (all the way up to the Body element), FIXED
positioning, is even one level higher. And that’s because elements set to fixed
position now respect the viewport ITSELF. Of course, the viewport is the part of the
browser that houses whatever’s currently visible. If you position something using Fixed? Two things happen: first, just like absolute
positioning, our fixed image here is NO longer part of the document flow (we can see the
text and everything else moved up). But two: we can now position it...and when
we DO... it’s now fixed to the bottom-right of the viewport. This is going to stay on the bottom-right
of the viewport, even as you scroll through a longer document, like the collected works
of Emily Dickinson. Fixed positioning is helpful if you’re building
something like a banner which you WANT to be visible even as someone scrolls down the
page. Just set it to fixed, position it however
you want (in this case, it’s 0 pixels from the left and right, and 0 pixels from the
bottom). And now as we scroll down, it remains in the
same spot. Again (it’s positioned around the VIEWPORT;
not any specific element on the page). Another really common use for fixed positioning
is a popup modal. Which we’ll demonstrate now using a photo
of Academy Award Winner Meryl Streep. Let’s add a div block. It doesn’t matter that much where we put
it (we can put it right inside the Body) — but here’s the important thing: we’ll set
it (we’ll set this div block) to fixed positioning. And we can use our preset here to set it to
0 on all sides (take up the full viewport). And we can set the background image (we can
add a background and choose an image)...of Meryl Streep. And the reason we’re doing this is because
once we configure our background image? We can demonstrate that no matter how far
down the page we scroll, Meryl Streep is always there. The only difference with a popup modal? Is that (usually) it’s not a picture of
Meryl Streep, and it’s more often a background color that helps draw some contrast (something
that implies a change). A common one here is a background color that’s
darker, sometimes with a lower opacity. And what it’s doing is this: not only is
the div block (which is really the START of our popup modal) — not only is it fixed
to all sides of our viewport, but it’s not moving as we scroll. (That’s the difference between absolute
and fixed positioning — both remove an object from the document flow, but an element set
to fixed positioning always stays FIXED to the viewport). Here’s why that matters: if we’re building
a popup modal, we’ll probably want another div block right in the center. So since our dark, lower-opacity background
is fixed, that means CHILDREN of that background are fixed. So if we size this NEW div block (just for
this example let’s set it to a 400-pixel width and a 200-pixel height) — and — just
so we can see what’s going on, if we set our background color to SOMETHING? When we scroll, BECAUSE our new, lighter color
div block is INSIDE the fixed darker, lower-opacity thing, the new div block doesn’t move either. (Fixed elements — in fact ALL types positioning
affect an element AND its children). So that means the children can be styled however
you want. For instance, let’s select our fixed element
(that darker background). And we’ll set it to flexbox...making sure
its child elements ALIGN...and justify to the center. When we scroll? We have this darker background that’s fixed,
and it’s children elements also stay fixed WITH our background. Now. We have full teaching available on this over
on Webflow University, so if you want to dig deeper into creating a popup modal, check
that out if you haven’t already done so. But fixed positioning is a VERY effective
tool. In fact, Bloomberg said it best in their prescient
2008 write up on web design. They said — you know what? We can’t get to it. Because they’re using a popup modal. Now. We’re not done with fixed (we’ll come
back to it in a second for a comparison) — but for now, let’s talk sticky positioning. And we’re going to show TWO practical examples:
a sticky navbar (navigation that stays on the top of the viewport as you scroll)...and
a sticky sidebar that stays in the same position, but respects the boundaries of the section
it’s inside. First one is the navbar. And it’s fairly straightforward. Here’s a navbar, and by default, its position
is set to static. Let’s FIRST set it to fixed to see what
that does. And notice what happened there, because we’ll
cover that change in a second. First, let’s select our Top preset so everything’s
positioned correctly. And now we’ll toggle back and forth here
between Static and Fixed. And here’s what’s happening: We KNOW the moment we make something fixed,
it’s no longer behaving like a static element (the section underneath is now tucking BEHIND
the navbar). And as we scroll? The navbar is FIXED to the viewport. But with sticky (let’s just change the position
to sticky...and to make sure we’re not inheriting any of those Top values we set from our Fixed
example, let’s just clear all that out). But now that it’s Sticky, notice how (even
if we scroll)...it’s...not very sticky. That’s because the key to sticky positioning
is telling it how far you can scroll...before it STICKS. Let’s set our top value to 0. And that means now it’ll stick RIGHT at
the top. So as we scroll, it’s stuck to the top of
the viewport. But the DISTINCTION here is (if we switch
between Static and Sticky)? We can see that (unlike Fixed positioning),
Sticky behaves just like a Static element. Nothing’s...tucking behind anything else
because Sticky elements still take up space. But here’s another thing we can do. Here’s a sidebar inside a section (if we
look in the Navigator, we can see the section is a parent of the sidebar — but this works
for almost any element). Without doing anything, if we scroll down
the page? The sidebar does...whatever things normally
do when they scroll down a page. Nothing special yet. With the sidebar selected, let’s go down
and set our position...to sticky. And when we do? If we scroll NOW, the sidebar, again, does...whatever
things normally do when they scroll down a page. Remember: we have to define under what circumstances
the element sticks. So. Let’s set the top value to 0. That means when we’re scrolling (we can
see here), the sidebar scrolls normally UNTIL it hits 0 pixels from the top of the viewport. THEN it sticks. But check this out (this is where the sidebar
in a section example is more interesting). When it reaches the end? When we get to the end of the sidebar’s
parent element (the section)? It starts scrolling normally again, anchored
to the bottom of the section as we scroll. That’s because elements positioned using
sticky will usually STICK...only while their PARENT element is in view. And when the sidebar hits the BOTTOM of its
parent? It begins scrolling normally. We can also choose a higher value here. Maybe instead of 0 we have a higher value
in pixels. That means (we can see as we scroll) that
the element now begins STICKING when it hits that number (that many pixels from the top
of the viewport). That’s sticky positioning. Finally, we have floats...and clears. And these have a lot of historical baggage
on the web. (A lot of people used to use floats and clears
for positioning all sorts of things, but since flexbox and grid became more mainstream, there
are far less infuriating ways to build common layouts.) So. Does that mean floats and clears are obsolete? Not at all. In fact, they’re still highly practical
for a number of applications, and to demonstrate this, we have some headings, some paragraphs,
and an image. If we want the image to float to the left
of all this text? We just...float it to the left. Notice how all the paragraphs (the heading...)
— they’re sort of wrapping AROUND the image. We can even add margin on the image (margin
on the right...margin on the bottom) so there’s some breathing room. And notice how the TOP heading ISN’T affected. That’s because floats work like this: they’ll
only make other elements wrap around... IF those elements are AFTER the thing that’s
floating. And we can SEE the document order — we can
check the order of elements in the Navigator). In fact, if we want the TOP heading to wrap,
we would just move it BELOW the image. And JUST like that, the TOP heading is wrapping,
too. If we want it back on the top? Back on the top. And what if we want things to float RIGHT? Same deal here — we select the image, and
float it to the right. Of course... now we’ll probably want to
REMOVE the right margin, and add some more to the left side. And if floats let us float things where paragraphs
(if floats make other stuff like text or anything inline wrap AROUND a floated element), then
CLEARS will make those things CLEAR out of the way and start AFTER the floated element. Now. That was a terrible SENTENCE. Instead, let’s DEMONSTRATE by selecting
one of these text elements (the heading) which RIGHT NOW... IS wrapping around the floated image. If we clear it? If we choose Clear both? It’s cleared. (It got out of the way.) Now — clear left, clear right — do those
things matter? No. But yes, they do. In a lot of circumstances, clear BOTH is a
quick way to clear something from ANY floated element. But what if we have something like this: an
image floating left...AND an image floating right. Clear LEFT...that’ll clear things floating
left. Clear right? That’ll clear things floating right. So. Floats can be applied to elements (most commonly
an IMAGE element) to get things like text or inline objects to wrap AROUND that element. Clears are applied to the elements we want
CLEARED from whatever thing is floating. Floats. They’re easier to demonstrate than they
are to talk about. But they’re an extremely useful tool in
our design and development toolbox. But that’s it. A lot to review here, and we’ll do it pretty
quickly. And if that was too quick, let’s review
at a different pace: we covered statically positioned elements, which are the default
way elements position themselves. We covered relative positioning, which lets
you position something RELATIVE to its original spot (but it doesn’t mess with other stuff
on the page), we covered absolute positioning, which PULLS something out from the document
flow and lets you POSITION that something around OTHER elements, we covered fixed positioning
which fixes an element to the VIEWPORT itself, we covered sticky positioning, which lets
us make something stick to the viewport as soon as it’s however far from the top of
the viewport you specifically specify, we sat collectively befuddled at the use of “specifically
specify”, and we created a layout that wraps text around an image using floats and clears. Now. We have tons of information about all of these
including design examples of all kinds, so check that out, over on Webflow University. But those are the basic CSS positioning options.
