Layout & Design

Absolute Positioning in Framer (Fundamentals Lesson 5)

Joseph

7:40

79K views

Sep 6, 2024

About this lesson

The beautiful thing about Absolute positioning for us visual designers is that we get to drag things around and position them in a super freeform way — just like working in the design tools we know and love.

But when it comes to building well-structured, responsive websites, there’s a bit more to it — so let’s take a deeper look at the ins and outs of Absolute positioning, what it can do for us, and when it makes the most sense to use.

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=0s Intro

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=4s Overview of layer position types

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=13s Understanding absolute positioning

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=29s Pinning and setting position in Framer

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=43s Centering vs stretching with pinning

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=67s How pinning affects resizing

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=113s Stacks vs absolute positioning

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=154s Switching a layer from relative to absolute

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=190s Understanding Z index

https://www.youtube.com/watch?v=h_ejFUqkLXQ&t=218s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

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

TeachesAbsolute Positioning

Also coversBreakpoints Frames Grids Responsive Design Sizing Stacks Sticky & Fixed

Watch on YouTube ↗

‹ Framer Update: Time-Based Springs

Framer Marketplace Update: Creator Dashboard ›