The nested nature of HTML tags create stacked elements on a second and third level. In this video, learn about how the z-index property works.
- [Instructor] Every time an html tag is nested…the elements are stacked in layers kind of like a sandwich.…Web pages appear to be two-dimensional,…but they're actually three-dimensional.…Elements can be positioned along the horizontal x-axis…and along the vertical y-axis,…but there is a third dimension.…The z-axis describes how layers…can be stacked on top of each other,…referred to as the stacking context.…An element with a higher stack level is rendered…in front of the element with the lower stack level.…
For example, when we added the background colors…to each section, the color appeared behind the text,…because the text is contained within the nested html tags.…Most of the time, it's hard to see how the elements stack…on the z-index unless they overlap each other…using a negative margin or position property.…Let's take a look at the natural stacking order…in a live example.…The styles here in the CSS box…have just been added for visualization…and doesn't affect the natural z-index stacking order.…
Also, the stacking order is applied…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.