Welcome, future web designers! We're venturing into the domain of CSS Positioning, navigating through Static, Relative, Absolute, and Fixed types. Next, we'll adjust the positioning of our HTML elements using top, right, bottom, and left properties. Finally, we'll touch on the width and z-index properties.
By default, all HTML elements have a static position. They flow naturally on the webpage, like stars in the sky. Static positioning disregards top, right, bottom, and left values. Let's observe a static paragraph:
Next, let's implement some flexibility with relative positioning. This allows us to slightly shift HTML elements without impacting others. For this, top, right, bottom, and left properties come into play. In this example, our paragraph shifts 20 pixels to the right:
With absolute positioning, we allow our elements the freedom to roam. An element moves relative to the nearest positioned parent. If there are no such parents, it moves relative to the page. Here's an p element in the top-right:
fixed positioning locks an element in a position relative to the viewport, which means the visible part of the web page on your screen. This technique ensures that the element remains in the same spot even when you scroll through the page. For example, in the following scenario, the header is kept at the top of the viewport at all times, providing a stationary point of reference as you move up and down the page:
