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:
HTML, XML1<p style="position: static;"> 2 I stay put, like a steadfast star! 3</p>
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:
HTML, XML1<p style="position: relative; left: 20px;"> 2 I'm a moving star, nudged right by 20 pixels! 3</p> 4<p style="position: relative; top: 10px;"> 5 And I am moved to the bottom by 10 pixels! 6</p> 7<p style="position: relative; bottom: 15px; right: 17px;"> 8 Another paragraph that is moved towards the top and left so that the gap from bottom is 15 pixels and the gap from right is 17 pixels; 9</p>
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:
HTML, XML1<p style="position: absolute; top: 20px; left: 20px;"> 2 I'm a paragraph positioned absolutely at the top-left corner! Distance from top edge is 20px, and from left edge is also 20px. 3</p>
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:
HTML, XML1<header style="position: fixed; top: 0;"> 2 Always at the top, like a guiding star! 3</header>
We can control the size of our elements using width, which sets the width for an element. Here, a div element spans 50% of the available width:
HTML, XML1<div style="position: relative; width: 50%;"> 2 I'm a dwarf star, at half-size! 3</div>
In the universe of CSS, elements stack at different altitudes, determined by z-index. This property accepts integer values and determines the stacking order of elements.
HTML, XML1<p style="position: relative; z-index: 3;"> 2 Shooting stars lead, at the forefront! 3</p>
Our paragraph takes the forefront, appearing in front of elements with a z-index of less than 3.
Great job, space explorer! We've journeyed across CSS Positioning, learning about top, right, bottom, left properties. We've also manipulated width and explored the z-index. Upcoming are hands-on challenges to reinforce these concepts. Fasten your seatbelt for future web design adventures! Safe travels!