One place for hosting & domains

      Position

      Making Elements Stick in CSS Using position: sticky


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      There’s a new value in town for the CSS position property: sticky. It allows us to make elements stick when the scroll reaches a certain point. An element with position: sticky will behave like a relatively-positioned element until it reaches a specified point and then starts behaving like a statically-positioned element. In this post we’ll create a simple example to illustrate.

      We’ll have a div container that will be a flex container and then 4 additional div elements that will be the flex items. Note we don’t have to use flexbox at all for position: sticky to work, here it’s just that flexbox happens to work great for our example.

      Check our flexbox primer if you’d like a refresher on the different flexbox properties and values.

      Here’s the simple markup:

      <div class="container">
        <div class="item punk">
          <img src="https://www.digitalocean.com/images/punk.svg" width="100" alt="Item 1">
        </div>
        <div class="item pony">
          <img src="/images/pony.svg" width="100" alt="Item 2">
        </div>
        <div class="item dino">
          <img src="/images/dino.svg" width="100" alt="Item 3">
        </div>
        <div class="item steampunk">
          <img src="/images/steampunk.svg" width="100" alt="Item 4">
        </div>
      </div>
      

      And now our styles, with the important rules highlighted:

      .container {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
      
        border: 2px dashed rgba(114, 186, 94, 0.35);
        height: 400px;
        background: rgba(114, 186, 94, 0.05);
      }
      
      .punk {
        position: -webkit-sticky;
        position: sticky;
        top: 4rem;
      }
      
      .pony {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }
      
      .dino {
        position: -webkit-sticky;
        position: sticky;
        bottom: 1rem;
        align-self: flex-end;
      }
      

      And here’s the result. Try scrolling the page up and down to notice what happens:

      If position: sticky is not working: There are two common scenarios where an element set to position: sticky; won’t actually stick to the window as intended:

      1. No position property has been defined: Make sure the sticky element has top, bottom set. Or in the case of horizontal scrolling, left or right.)
      2. One of the element’s ancestors has incompatible overflow: If any of the parents above the sticky element have overflow (x or y) set to hidden, scroll or auto, sticky will not work.

      Conclusion

      Here are a few additional things to note:

      • With our example, the align-items: flex-start rule on the flex container is important because otherwise flex items default to a value of stretch where the elements would take the whole height of the container, cancelling the sticky effect.
      • We need to make use of the -webkit-sticky vendor prefix for it to work in Safari.
      • Notice how sticky-positioned elements are only sticky within their parent element.
      • Browser support for position: sticky: As of 2020, 95% of browsers have some level of support. For details see Can I Use css-sticky



      Source link

      Practical Guide to Using CSS Position Relative & Absolute


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      In this article, you’ll learn how to use CSS position: relative and position: absolute through ample amounts of demos, and learning aids.

      CSS position is sometimes considered an advanced topic because it can do things that are somewhat unexpected. Well, don’t let “the experts” intimidate you from pursuing excellence in your CSS competence! It’s a very accessible topic once you’re equipped with some of the underlying ideas.

      Render Flow

      An important concept to understanding relative/absolute positioning is render flow.

      The general idea is that HTML elements all take up some space. Your browser’s rendering engine always renders everything in a grid-like fashion, starting at the top-left corner and moving successively towards the bottom-right until it’s done placing all of your HTML content.

      If you’ve ever had a slow internet connection, and watched as large stuff on the webpage would push everything rightward and downward, that is essentially “render flow” in action.

      You can change this default behavior using CSS position.

      CSS Position

      CSS position is sometimes considered an advanced skill because it’s not as intuitive as font-size or margin, etc., since it changes the natural “render flow” of the browser.

      These are the possible values for CSS position:

      .foo {
        position: static;
        /* position: relative;
        position: absolute;
        position: sticky;
        position: fixed; */
      }
      

      Today we’re just going to look at position: absolute and position: relative since they’re perhaps the most versatile ones that will get you a lot of mileage once you feel confident with them.

      Relative Positioning

      When you make an HTML element position: relative, it’ll remain “in the flow” of the layout but you can move it around!

      .green-square {
        position: relative;
        top: 25px;
        left: 25px;
        /* ... */
      }
      

      Along with position: relative you’ll usually want to define the top, right, bottom, or left offset.

      You can think of “relative” position as being: “relative to where it was initially positioned.” In this case, the green square is now 25px from the left, and 25px from the top of where it was initially going to be.

      What’s also worth noting is that its width and height is preserved in the square grid. That means it’s still considered “in the flow” of the layout… it just got kinda nudged.

      Absolute Positioning

      Absolute positioning is a very powerful CSS rule for moving HTML elements around. Sometimes yielding unexpected results:

      .orange-square {
        position: absolute;
        top: 0px;
        left: 0px;
        /* ... */
      }
      

      The orange square is actually the 13th of these 25 squares (the one in the middle of the grid), but it looks like it’s the last square! Weird. Using position: absolute takes elements “out of flow” so its grid space gets collapsed.

      Yea but why’s it all the way up there?!

      Originating coordinates

      The orange square gets placed at the 0x, 0y coordinates (eg.: the top-left corner). Just how browser rendering always begins at the top-left corner, position: absolute elements use that as their rendering origin too. You can use top/right/bottom/left properties to offset it from there.

      But, you can also give it different originating coordinates…

      .grid {
        position: relative;
      }
      .orange-square {
        position: absolute;
        top: 0px;
        left: 0px;
        /* ... */
      }
      

      In the example above, the parent element (div.grid) has the position: relative rule which causes the orange square to take that as its rendering origin.

      While this may seem unintuitive behavior, it’s actually intentional! Allowing for this gives you a lot of control over where/how you arrange HTML elements…

      Conclusion

      When you start using position: relative and position: absolute it opens a new world of design possibilities. You can create layered visual elements, and feel a deep sense of confidence about how browsers will render, and thus place the visual elements that you’ve so meticulously designed.

      Learn more about CSS position at the Mozilla Developer Network



      Source link

      How to Position Your Idea with User Research


      How to Join

      This Tech Talk is free and open to everyone. Register below to get a link to join the live event.

      Format Date RSVP
      Presentation and Q&A August 11, 2020, 12:00–1:00 p.m. ET

      If you can’t join us live, the video recording will be published here as soon as it’s available.

      About the Talk

      After quick-and-dirty validation of your idea, now what? How do you know when to prioritize user feedback, iterate, or completely pivot? In this Tech Talk, Colleen Diez, Lead User Researcher at DigitalOcean, will present some easy and effective research tools that help you use research to guide product development and customer satisfaction.

      What You’ll Learn

      • Research methods to prioritize the right potential new features to build
      • How to target customers based on their internal motivations
      • How to use quality metrics to iterate for launch
      • Tips for synthesizing and making sense of your research data
      • When to know if you have found the right audience, or if it’s time to change strategy

      This Talk is Designed For

      • Entrepreneurs
      • Startups
      • Small-to-medium sized businesses

      About the Presenter

      Colleen Diez is currently the Lead User Researcher for DigitalOcean. A former XML/XSLT developer, she loves making connections, finding patterns in information, and telling stories about people and technology.



      Source link