CSS Positioning and Z-Index
The course is part of this learning path
This practical course offers an introduction to CSS Positioning and Z-Index.
- Learn what is CSS positioning and how to activate it
- Learn what is the default CSS position
- Learn about position relative, absolute, and fixed
- Learn about additional CSS positioning properties top, right, bottom, and left
- Learn what is the Z-Index CSS Property and how to implement it
This course is intended for anyone who wants to learn about CSS Positioning and Z-Index
Anyone with an interest in CSS in general. The following course will serve as a brief introduction to CSS: Introduction to CSS Syntax
Introduction to CSS positioning and Z-index. On the screen, in the HTML panel, I have three divs: a static div, a fixed absolute div that is inside of the static div, and a relative div. In the CSS panel, I have the corresponding CSS for each of these divs. I'm gonna hide the HTML panel for the remainder of this video. Every element in HTML has a CSS position property. The default value for this property is static. And what static means is that the element will follow the natural flow of the webpage. Because static is the default position, there's no need to type it out as a CSS property.
For demonstration purposes, each CSS block in the CSS panel has the position property declared with the default value of static. If the default is static, what happens when other positions are used. To begin, in the relative class CSS block, I'm going to change the position value from static to relative. And now the relative div has shifted over to the right. When an element's position is something other than static, four additional position properties become available: top, right, bottom, left.
A position value of relative means that the location of the element is relative to its normal position. Using these additional position properties the relative position can be shifted from a certain direction. Taking a closer look at the relative CSS, there is a left CSS property with a value of 75 pixels. When I change the position to relative, the left property will now affect the element's position, shifting the element over 75 pixels from the left. I will change the left position to right. Now the element is partially off screen after shifting over 75 pixels from the right.
Now I'm gonna change this back and inside of the absolute CSS block, I'm gonna change the position from static to absolute. Position absolute removes the element from the flow and positions it relative to its nearest ancestor. But there is a issue here. The ancestor element cannot have a static position. Because the static div, which the absolute div is inside of, has a static position, the absolute div ignores it as an ancestor. The ancestor becomes the view port, also known as the browser window. The absolute position still works, but the reference for directional flow has changed.
In the absolute CSS block, there is a top CSS property with a value of 200 pixels. The absolute div has shifted 200 pixels away from the top of the view port because of the change in directional reference. Continuing the focus on the fixed and absolute div, I'm gonna scroll down for demonstration purposes. The fixed absolute div is no longer on the screen as it's been scrolled away. But what if I wanted the fixed absolute div to stay in the same position on the page regardless of the scroll and other elements.
Scrolling back, I'm gonna change the absolute position to fixed. Now I'm gonna scroll again. The fixed absolute div remains at the same location. Position fix sets the position of the element based on its location in the view port. So just like the absolute position, this element is now fixed 200 pixels away from the top of the browser and it will always remain in the same location on the page.
Now, one thing you may have noticed is that the fixed absolute div is underneath the relative div. If I wanted this div to be on top of the relative div, how would I go about resolving this? Well, in CSS, there is a property called Z-index that sets the stacking position of each element. The default value for Z-index for all elements is zero. When one element has a higher Z-index value than another element, the element with the higher value will always stack on top of any element with a lower value. To demonstrate this, in the absolute CSS block, I'm gonna add Z-index as a property and give it a value of one.
Now the fixed absolute div is on top of the relative div. And as I scroll, the fixed absolute div will always stay on top of all other elements with lesser values. And that's it. Thanks for watching Cloud Academy.
Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.
Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.
Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.
Farish is an avid powerlifter, sushi lover, and occasional Funko collector.