Internet Explorer 6 and older, and also Opera 8 and older, got this entirely wrong and used the dimensions of the parent block instead. But CSS rendering actually happens in three dimensions! The two main axes in a web page are the horizontal X axis and the vertical Y axis.
The origin of this co-ordinate system is in the upper left-hand corner of the viewport, ie where both the X and Y values are 0. Positioned elements including relatively positioned elements are rendered within something known as a stacking context. Elements within a stacking context have the same point of reference along the Z axis.
You can change the Z position also called the stack level of a positioned element using the z-index property. The value can be an integer number which may be negative or one of the keywords auto or inherit. The default value is auto , which means the element has the same stack level as its parent. You should note that you can only specify an index position along the Z axis. Think of it like a deck of cards: you can stack the cards and decide that the ace of spades should be on top of the three of diamonds—each card has its stack level, or Z index.
A z-index of 0 zero means the same as auto , but there is a difference to which I will come back in a minute. When two elements in the same stacking context have the same stack level, the one that occurs later in the source code will appear on top of its preceding siblings. There can in fact be no less than seven layers in one stacking context, and any number of elements in those layers, but don't worry—you are unlikely to have to deal with seven layers in a stacking context. The order in which the elements all elements, not only the positioned ones within one stacking context are rendered, from back to front is as follows:.
The highlighted entries are the elements whose stack level we can change using the z-index property. The rest of this section discusses local stacking contexts.
You can elect to skip this if you wish. This is the difference I mentioned before between z-index: auto and z-index: 0. When an element establishes a local stacking context, the stack levels of its positioned descendants apply within this local context only. The parent and its descendants will form an indivisible unit within the stacking context that surrounds the parent.
You have expense reports, receipts, order confirmations and whatnot, and you stack one paper on top of another—to make life easier for you accountant, you insert types of papers that belong together in different envelopes.
A local stacking context is analogous to such an envelope. It keeps related elements together and prevents other elements from being inserted between them. You can sort the contents within each envelope as you like, but that sort order only applies within that envelope and has no bearing on the stack of papers as a whole.
Your stack now contains a mix of loose papers elements with stack level auto , and envelopes elements with an integer stack level.
Envelopes with positive stack levels lie on top of the loose papers, while envelopes with negative stack levels appear at the bottom of the pile. If you follow the examples, you should be able to get a feel for how things work. This makes the span elements absolutely positioned and sets their positions and dimensions. Wait a second though— span elements are inline—how can you specify dimensions for inline elements? The answer is that absolutely positioned elements, like floated elements, automatically generate block boxes.
This type of positioning allows you to place your element precisely where you want it. The positioning is done relative to the first relatively or absolutely positioned parent element.
In the case when there is no positioned parent element, it will be positioned related directly to the HTML element the page itself. An important thing to keep in mind while using absolute positioning is to make sure it is not overused , otherwise, it can lead to a maintenance nightmare.
In the example, the parent element has the position set to relative. Now, when you set the position of the child element to absolute , any additional positioning will be done relative to the parent element.
The child element moves relative to the top of the parent element by px and right of the parent element by 40px. Through these examples, you have seen differences between absolutely and relatively positioned elements. See the original article here. Web Dev Zone.
Thanks for visiting DZone today,. Edit Profile. Sign Out View Profile. Over 2 million developers have joined DZone. The element is clipped into this shape, and displayed. We just launched W3Schools videos. Get certified by completing a course today! If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:. Margins Margin Collapse. Float Clear Float Examples. Navbar Vertical Navbar Horizontal Navbar.
Shadow Effects Box Shadow. Example div. Example Bottom Left. Report Error. Your message has been sent to W3Schools.
W3Schools is optimized for learning and training.
0コメント