00:00:00
the beautiful thing about absolute
00:00:01
positioning for us visual designers is
00:00:03
that we get to drag things around and
00:00:05
position them in a super free form way
00:00:07
just like working in the design tools we
00:00:09
know and love but when it comes to
00:00:11
building well-structured responsive
00:00:13
websites there's a bit more to it so
00:00:16
let's take a deeper look at the ins and
00:00:18
outs of absolute positioning what it can
00:00:20
do for us and when it makes the most
00:00:22
sense to
00:00:24
[Music]
00:00:25
use since this is the first of several
00:00:28
lessons on layer positioning I want to
00:00:29
start start with an extreme
00:00:31
simplification of the four layer
00:00:33
position types we have absolute where we
00:00:36
can freely position layers in relation
00:00:38
to their parent frame relative where the
00:00:41
position is determined by the flow of
00:00:43
content in a stack or grid fixed where
00:00:47
the position of a layer is fixed
00:00:48
relative to the
00:00:49
viewport and sticky where a layer
00:00:52
switches from relative to fixed when it
00:00:55
hits the top of the viewport then back
00:00:57
to relative when it hits the bottom of
00:00:59
its parent frame
00:01:00
I know that's already a lot to take in
00:01:01
but none of it needs to make sense just
00:01:04
yet we're going to start slow and focus
00:01:06
on absolute positioning for this lesson
00:01:10
you can think of absolute position
00:01:11
layers as floating in the sense that we
00:01:14
can move them around with complete
00:01:16
disregard for other sibling layers and
00:01:18
just focus on where the layer is in
00:01:20
relation to its parent frame just like
00:01:22
figma and sketch it's our default when
00:01:25
creating new projects and pages so
00:01:26
you'll feel right at home the one thing
00:01:28
that may differ slightly from screen
00:01:30
design tools is how we Define the
00:01:32
position of these layers rather than the
00:01:35
layer having just an X and Y position
00:01:37
that's always measured from the top left
00:01:38
corner like sketch and figma framer
00:01:41
gives us a super inuitive combination of
00:01:44
pinning and describing position which is
00:01:46
how things work on the web with HTML and
00:01:49
CSS let's take a look at how it works
00:01:51
with a super simplified example here I
00:01:54
have this long black frame with an
00:01:56
absolute position near the top of this
00:01:58
desktop breakpoint which is the parent
00:02:00
element it's positioned within before we
00:02:03
even look at the properties panel let's
00:02:05
get philosophical for a moment there are
00:02:07
a few different ways that a human being
00:02:09
could describe the position of this
00:02:11
Frame you could say it's horizontally
00:02:13
centered you could say it's 20 pixels
00:02:16
from the left or you could say it's 20
00:02:17
pixels from the right or both you could
00:02:20
say it's 20 pixels from the top or you
00:02:23
could say it's 500 pixels from the
00:02:25
bottom all of these things are true but
00:02:27
not all of these facts are equally
00:02:29
important
00:02:30
for example who cares that this is 500
00:02:32
pixels from the bottom it just so
00:02:34
happens to be 500 pixels from the bottom
00:02:36
but that doesn't mean it's a deliberate
00:02:38
design decision so let's look at the
00:02:40
properties panel here we can see all
00:02:43
those values describing how far the top
00:02:45
of the layer is from the top of its
00:02:46
parent frame how far the left is from
00:02:49
the left the right is from the right and
00:02:51
the bottom is from the bottom you'll
00:02:53
notice some of these values are solid
00:02:55
and some are great out a solid value
00:02:58
means a value that's EXP explicitly set
00:03:01
which also means it's a relationship
00:03:02
with the parent frame that we want to
00:03:04
maintain in this case we're saying that
00:03:06
this 20 pixels is no accident we want
00:03:09
the top of this Frame to be 20 pixels
00:03:11
from the top of the parent frame now and
00:03:13
if the parent changes size in other
00:03:15
words pinning a side means we want to
00:03:17
maintain a fixed amount of space where
00:03:20
having a side unpinned means we don't
00:03:21
mind if that space changes this is that
00:03:24
combination of pinning and setting
00:03:26
position that I mentioned a moment ago
00:03:28
we can pin aside by either explicitly
00:03:30
setting a value or by clicking the
00:03:33
pinning controls to toggle them clicking
00:03:36
on the middle will also toggle between
00:03:38
pinning all four sides or none of them
00:03:41
which will position relative to the
00:03:42
center I'll go back to pinning just the
00:03:45
top but for the sides we actually have
00:03:47
an important decision to make here if we
00:03:49
leave both sides unpinned the rectangle
00:03:52
will stay centered sure but since the
00:03:55
rectangle has a fixed pixel width it'll
00:03:57
stay the same width as the parent
00:03:59
changes size sometimes that is what we
00:04:02
want but for the sake of comparison
00:04:04
let's pin those 20 pixel
00:04:06
values and now we can see that the
00:04:08
rectangle maintains those pixel margins
00:04:11
by getting stretched and squashed by the
00:04:13
parent frame automatically another thing
00:04:15
worth noting is that pinning doesn't
00:04:17
only affect what happens when the parent
00:04:19
frame changes size but also if we change
00:04:22
the size of a child layer on the
00:04:24
properties panel for example I'll pin
00:04:26
the rectangle to the top right then
00:04:29
change the width of the rectangle to 100
00:04:32
pixels That explicit 20 pixel Gap to the
00:04:34
right Edge is maintained so I don't need
00:04:37
to worry about resizing then
00:04:39
repositioning in two separate steps it's
00:04:42
important to note that the choices we
00:04:43
make here affect how things move and
00:04:45
resize on the design canvas as well as
00:04:47
in the browser on the published site so
00:04:50
making good choices is also a stride
00:04:53
toward making our sites properly
00:04:55
responsive in the next lesson we're
00:04:57
going to dive into stacks and relative
00:04:59
positioning but in case you've already
00:05:00
come across a stack I want you to be
00:05:02
prepared for how they behave when
00:05:04
absolute positioned layers get mixed in
00:05:07
in this example I have a frame with a
00:05:09
vertical stack layout which means each
00:05:11
of the child layers set to relative
00:05:13
positioning will follow the flow of the
00:05:15
stack so dragging simply rearranges the
00:05:18
layers within the flow I'm not free to
00:05:21
position things the way I was with
00:05:22
absolute positioning but just because a
00:05:24
layer like this graphic is a child of a
00:05:26
stack doesn't mean I can't head over to
00:05:28
the properties panel and switch it from
00:05:31
relative to Absolute you'll notice
00:05:34
things collapsed a bit here on the
00:05:35
canvas so what just happened well
00:05:38
switching a layer from relative
00:05:39
positioning to Absolute positioning
00:05:41
effectively removes it from the flow of
00:05:44
the stack it's still a child of the
00:05:46
stack frame but its sibling layers still
00:05:49
set to relative only push against one
00:05:51
another ignoring absolute position
00:05:54
layers and just as we'd hoped we can now
00:05:57
drag our absolute layer to position it
00:05:59
wh ever we'd like you'll also notice
00:06:02
that this layer is visually overlapping
00:06:03
its siblings but on the layers panel
00:06:06
it's actually not the layer on top so
00:06:09
what the heck it's because of a style
00:06:11
property called zindex that was added
00:06:14
automatically when we made the switch
00:06:16
from relative to Absolute positioning a
00:06:17
moment ago using zendex we can pull
00:06:20
things forward on top of everything else
00:06:23
or push things back behind everything
00:06:25
else regardless of where it happens to
00:06:27
be in the layer hierarchy the higher the
00:06:29
number the further forward the lower the
00:06:31
number the further backward and for
00:06:34
layers that share the same zindex the
00:06:36
layer hierarchy will determine which is
00:06:39
above and what's below like usual the
00:06:42
default zindex for layers is zero which
00:06:44
means a z index of one already puts this
00:06:46
graphic above everything zero puts it on
00:06:49
the same plane and negative 1 puts it
00:06:52
back behind everything you might be
00:06:54
thinking I didn't ask for zindex to get
00:06:57
involved here but it's worth noting that
00:06:59
with stacks the layer order first and
00:07:01
foremost determines the flow of the
00:07:03
content so thanks to the Zandex property
00:07:06
we can separately control how things
00:07:09
overlap all right this was a big one a
00:07:12
really big one we're finally unpacking
00:07:14
the fundamental layout mechanics that
00:07:16
make framer so powerful this stuff is
00:07:19
easy to fiddle with but it does take
00:07:21
time to master watch this video a few
00:07:24
times and go easy on yourself when you
00:07:26
make mistakes along the way I'll see you
00:07:28
in the next one e
