Using the z-index CSS property, however, we can assign the menu a higher z-index relative to the image, forcing the menu to display at the top of the stack.
HTML STACK MENU CODE
If we hadn't added the extra CSS code via the style attribute, the image would have been on top of the stack (above the menu). This can be changed by assigning position: relative and a z-index value to each element: Developers usually write menu HTML first, placing that code at the top of the page thus, the menu is at the top of the DOM tree but at the bottom of the visual stack. This is why many times menus end up beneath other graphics. So, if you don't change anything, HTML elements defined later in a page's code will appear in front of HTML elements defined earlier when their x,y coordinates overlap. By default, HTML elements are indexed in order of appearance in the source code of the page (aka DOM tree). The z-index is specified when you need to circumvent the default stacking of HTML elements. (We'll be covering these position values in more detail in another article.) Changing the Default Stacking For most situations, the relative value is the one you'll want. The options for the position property are fixed, absolute, and relative. One reason why the z-index can be confusing is that the position property must be declared for each item you want to reposition with z-index. The CSS z-index property allows you to precisely layer content on your page no matter in what order you declared the objects in the page's HTML code. If you visualize objects on your page as a stack of sheets of paper, objects with the bigger z-indexes lie on the top of the stack. Thus, applying a greater z-index value to an HTML element relative to another HTML element places the first object in front of the second (closer to you) if they overlap. As the z-axis extends towards you, the z-index becomes more positive. On a web page, the virtual z-axis extends out of your monitor towards you. For visualization purposes, pretend that your monitor exists in three dimensions. If you were paying attention in math class, the name z-index probably rings a bell: the z in z-index describes the z-axis on a three-dimensional Cartesian coordinate graph (x, y, z). It's about controlling how various elements in your page (text, photos, menus, etc) are stacked on top of each other. OK, stop drooling over the cookies! Seriously, though, this is what the z-index property in CSS is all about.
0 kommentar(er)
