Absolute Positioning in Framer

00:07:40
https://www.youtube.com/watch?v=h_ejFUqkLXQ

Ringkasan

TLDRThe video explains the importance of understanding absolute positioning for design flexibility and responsiveness in web development. It introduces the four types of positioning: absolute, relative, fixed, and sticky, focusing on absolute positioning for this lesson. Absolute positioning allows elements to be freely positioned relative to their parent frame, akin to working in Figma or Sketch. Differences from screen design tools include a mix of pinning and spatial description akin to HTML/CSS. The video details how to define positions and stresses the importance of pinning, which maintains spacing as parent elements change size. The lesson further explores interactions with stack layouts, showing how switching an element to absolute positioning affects its behavior regarding the layout flow and z-index changes. Mastery of these concepts aids in creating responsive, well-structured sites.

Takeaways

  • 🎨 Absolute positioning offers design freedom akin to Figma and Sketch.
  • 📍 Pinning maintains spacing between a layer and its parent frame.
  • 🔄 Switching to absolute positioning removes elements from stack flow.
  • 🌐 Responsive design requires careful positioning choices.
  • 🖼️ Z-index controls element layering and overlap.
  • 🔗 Understanding pinning aids in creating adaptable layouts.
  • 📚 Mastery of positioning concepts is crucial for structured websites.
  • 🛠️ Framer tools mix design flexibility with web standards.
  • 🔍 Repeating and practicing these concepts leads to proficiency.
  • ↔️ Elements can be moved independently of sibling layers in absolute positioning.

Garis waktu

  • 00:00:00 - 00:07:40

    This video introduces the concept of absolute positioning, which allows visual designers to place elements freely within a design, similar to design tools like Figma and Sketch. However, in building structured responsive websites, understanding the nuances of different positioning types is crucial. The video outlines four layer position types - absolute, relative, fixed, and sticky - and focuses on explaining absolute positioning. It describes how absolute position allows elements to float in relation to a parent frame and introduces the concept of pinning with CSS, which allows designers to set explicit positional relationships. This is essential for maintaining consistent layout design across different screen sizes and ensuring properly responsive websites. The video further discusses positioning using a properties panel in design tools, explaining how to set these different variables to control layout effectively across changes in screen size. Viewers are encouraged to revisit the video as understanding these principles forms the foundation for more complex layout behavior, which will be covered in subsequent lessons.

Peta Pikiran

Video Tanya Jawab

  • What is absolute positioning in design?

    Absolute positioning allows elements to be placed anywhere in relation to their parent frame, much like designing in tools such as Figma and Sketch.

  • How does absolute positioning differ from relative positioning?

    Absolute positioning allows free placement without regard to other layers, while relative positioning is determined by the content flow in a stack or grid.

  • Can I use absolute positioning for responsive design?

    Yes, but it requires careful planning to ensure a well-structured, responsive website.

  • What is pinning in the context of absolute positioning?

    Pinning refers to maintaining a fixed spacing between a layer and its parent frame, ensuring the design remains consistent if the parent size changes.

  • What happens when you change a layer from relative to absolute positioning in a stack layout?

    The layer is removed from the stack flow, allowing it to be positioned freely without affecting sibling layers.

  • What is z-index and how does it relate to absolute positioning?

    Z-index controls the layering of elements, determining which sit on top when elements overlap. It can change automatically when switching from relative to absolute positioning.

Lihat lebih banyak ringkasan video

Dapatkan akses instan ke ringkasan video YouTube gratis yang didukung oleh AI!
Teks
en
Gulir Otomatis:
  • 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
Tags
  • absolute positioning
  • responsive design
  • visual design
  • web development
  • pinning
  • z-index
  • layout mechanics
  • Figma
  • Sketch
  • Framer