Designers Learn Code: Fixed Positioning

Designers Learn Code: Fixed Positioning

Today's topic is fixed positioning. When the position property of an element is set to fixed, it is positioned relative to the viewport. The result is that a fixed element always stays in the same place despite scrolling the page. Similarly, the top, bottom, left, and right properties are again used to further position the fixed element. A fixed element is removed from normal flow and does not leave a gap where it would have been positioned.

Just like an absolutely positioned element, a fixed element creates issues with accessibility. This relates to how a fixed element also causes performance issues because the browser needs to redraw the fixed elements as its location changes as the page is scrolled. This may lead to glitches in the browser and from an accessibility standpoint, a user may be confused. A way to improve the experience would be to add a will-change property that is set to scroll-position to the CSS. This property tells browsers that an element is expected to change. Browsers will optimize prior to executing the expected behavior. In this case, it may render the element in its own layer to improve performance and minimize problems with accessibility.

Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jum...

In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.