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.