This only occurred when we added a z-index to top-container because that's when a new stacking context was created. Instead, what we are ordering is the top-container and bottom-container divs, then the boxes, like so: This is because, in reality, what we're ordering here is not the boxes. Now what order do you think they'll be in? There's no way this gets even more complicated.Īt its heart, a stacking context is a group that you can move multiple items up or down the z-axis at the same time. You wake up, realize that you don't yet know what that sentence means, and think to yourself: are still in HTML order within the same z level priority and within the same stacking context In your dreams, you can still hear the book speaking to you: "Welp, that's enough reading in the book today" This is because the lime and slate take painting priority over yellow and cyan thanks to their relative positioning, but are still in HTML order within the same z level priority and within the same stacking context. You would see the following order of elements: Overall, this list is non-comprehensive to keep the list readable. While this includes all of the steps of painting order according to the CSS specification, those steps may have more sub-steps. Positioned elements without a z-index applied or with a z-index of 0, as well as a few other rules The text contents of non-positioned, non-floating elements, as well as a few other rules Positioned elements with a negative z-indexĮlements with a float style applied without a position applied The background of the stacking context root elementĬome back to this at the end of the article it won't make sense now. The background of the following tags: html, :root, body Here's a list of CSS rules that will change the order an element paints in, from the lowest priority to the highest priority: While relative positioning is one way that you can tell the browser to paint an element first, it's far from the only way to do so. Understanding more rules of Painting Order This means that our relative positioned element is painted first and seems to take priority in the z layer over non-positioned elements. This is because browsers paint positioned elements before non-positioned elements. While our green button now smoothly moves left when you hover over it, there's a new problem: The green box is now on top of the purple and blue boxes. While we'll take a look into the specific rules of painting in a moment, let's start by taking a look at the following code example: There are a lot of nuances there Nuance that's dictated by a strict set of rules. Given every bit of HTML and CSS, figure out where they belong and display them. Painting contents on the screen might sound straightforward at first, but think about what that entails: This process of showing HTML and CSS on the screen is called "painting" or "drawing" the screen. While we often think of this process as instantaneous, nothing in computer science truly is. Your browser is fed information from HTML and CSS to figure out what to show on-screen. While the concept of the "painting order" in the DOM is quite complex, here's the gist of it: Well, my friends, the modal is rendering under the footer due to something called "Painting Order". Oh dear! Why is the footer rendered above the modal? Let's use some CSS and HTML to build a basic modal:Īt first glance, this might look like it's been successful, but let's take a look at the rendered output: While building sufficiently useful modals can be a challenging task, a rudimentary modal can be completed even without JavaScript. This is what an example modal looks like from Google Drive:ĭespite some UX headaches that modals can introduce into an app, they're still a widely used UI element in many applications today. Modals are UI elements that enable you to display information in a box that rests above the rest of your page's contents. If you're being sent this article to learn how z-index works, you're in the right place.įor example, let's think about modals. This article doesn't expect you to have pre-existing z-index knowledge. Sure, you have a z-index, which many claim is an easy way to manage an element's z axis, but it seems so brittle and inconsistent! Managing overlapping issues using CSS is tricky. While this is cool, by introducing a third dimension to our web pages, we introduce the ability for elements to overlap with one another. Some browsers, such as Microsoft Edge, even provide a way to see a website blown up into a 3D view: While most web apps seem to focus on the x and y axis, representing a 2D plane that the user interacts with, there's actually a z-axis that's often ignored.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |