what is the difference between the z-index and transform:translateZ(); in css
The z-index-property is supposed to be a measure of stacking positioned elements while translateZ() is supposed to be animated and transitioned to move objects in the 3d-space.
They can be used interchangeably in some scenarios which you can learn more about here.
The z-index property allows you to set the order of the stack where any greater number assigned to it will just bring it in front of the other element whereas transform:transitionz() will actually decide the distance by which the element will be farther from another elements on z-axis.
Related
This property make me confuse.
well.. i searched in google:
What is the z-index?
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Answer Source
What is the z-index uses?
The order of which the elements overlap one another.
For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number. Answer Source
Ok i understand now , it organize the elements and we can use any number ... the higher z-index number appears on all elements..ok nice.
z-index and jquery..very simple and very nice
...but i noticed from the answers that it depend on position property, so -->...(google)..
What is the relation between z-index and position?
demo--> >>source
Ok ... so z-index and position are couple..must be together..
need more information ::
dose it make any conflicts in browsers(IE7,IE8,chrome,...etc)?
What are the z-index uses or what can we do with z-index(depending on the Tags)?
...etc?
correct me if i understand wrong...
Thanks in advance.
Z-index is the property that determines which html element appears on top of another html element when they overlap. The basic idea is that the element with the highest z-index is "on top".
By default, elements have a z-index of zero, but setting the css property on one element to 1, and another to 5 will make the latter element be "on top" of the former, if they overlap.
So far, so simple, but there are several things to look out for.
One, as already mentioned in another answer, is that z-index only has an effect if the element is positioned with position absolute, fixed or relative. (i.e. the css property "position"). An unpositioned element has a z-index of zero.
To complicate things further (and in my experience the area that is often not understood) is the concept of the stacking context. More info can be found in articles such as this. In short though, each time you explicitly set a new z-index, you start a new stacking context. All child elements of the one on which the z-index was set are now in this new stacking context, which may be above or below a stacking context on another unrelated element.
What does this stacking context mean? It means that an element with a z-index of 100 is not necessarily on top of an element with z-index of 1. If they are in different stacking contexts, only the z-indexes of the stacking contexts themselves matters.
I would suggest to have a look at this property on SmashingMagzine.
The Z-Index CSS Property: A Comprehensive Look
It covers all nuts and bolts of this property with great examples and demonstrations.
the most important thing to remember is that z-index works ONLY if the element has position relative, absolute or fixed
I'm not entirely sure what you're asking but for the most-part you only ever need to use z-index if you're doing complicated styling e.g. hover tooltips or dropdown navigations, simply to ensure that they display over other page content.
For basic designing you should generally be avoiding using the position and z-index properties as you can usually achieve the same effects with better performance and browser compatibility with just floats etc.
The Smashing Magazine link posted by Sarfraz is an excellent article on the topic and a good point of reference if you're still struggling to understand the functionality of the property.
This property make me confuse.
well.. i searched in google:
What is the z-index?
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Answer Source
What is the z-index uses?
The order of which the elements overlap one another.
For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number. Answer Source
Ok i understand now , it organize the elements and we can use any number ... the higher z-index number appears on all elements..ok nice.
z-index and jquery..very simple and very nice
...but i noticed from the answers that it depend on position property, so -->...(google)..
What is the relation between z-index and position?
demo--> >>source
Ok ... so z-index and position are couple..must be together..
need more information ::
dose it make any conflicts in browsers(IE7,IE8,chrome,...etc)?
What are the z-index uses or what can we do with z-index(depending on the Tags)?
...etc?
correct me if i understand wrong...
Thanks in advance.
Z-index is the property that determines which html element appears on top of another html element when they overlap. The basic idea is that the element with the highest z-index is "on top".
By default, elements have a z-index of zero, but setting the css property on one element to 1, and another to 5 will make the latter element be "on top" of the former, if they overlap.
So far, so simple, but there are several things to look out for.
One, as already mentioned in another answer, is that z-index only has an effect if the element is positioned with position absolute, fixed or relative. (i.e. the css property "position"). An unpositioned element has a z-index of zero.
To complicate things further (and in my experience the area that is often not understood) is the concept of the stacking context. More info can be found in articles such as this. In short though, each time you explicitly set a new z-index, you start a new stacking context. All child elements of the one on which the z-index was set are now in this new stacking context, which may be above or below a stacking context on another unrelated element.
What does this stacking context mean? It means that an element with a z-index of 100 is not necessarily on top of an element with z-index of 1. If they are in different stacking contexts, only the z-indexes of the stacking contexts themselves matters.
I would suggest to have a look at this property on SmashingMagzine.
The Z-Index CSS Property: A Comprehensive Look
It covers all nuts and bolts of this property with great examples and demonstrations.
the most important thing to remember is that z-index works ONLY if the element has position relative, absolute or fixed
I'm not entirely sure what you're asking but for the most-part you only ever need to use z-index if you're doing complicated styling e.g. hover tooltips or dropdown navigations, simply to ensure that they display over other page content.
For basic designing you should generally be avoiding using the position and z-index properties as you can usually achieve the same effects with better performance and browser compatibility with just floats etc.
The Smashing Magazine link posted by Sarfraz is an excellent article on the topic and a good point of reference if you're still struggling to understand the functionality of the property.
I recently realized how useless the position: static Is , It doesn't offer you anything unless the relative also does.
In fact my question Is "why not just adding this line to our CSS file ?"
* { position:relative; }
so we are always able to easily position any element absolutely from It's parent or moving the element It self around just by left: ... or the same for any direction.
so why elements are not positioned to relative by default?
thanks
Let's take some element in its default static state and make it position: relative;. Just by changing that value alone, nothing happens. It appears in the exact same place that it did before the change. But it does change two things:
It's original location will still be occupied by the element (like there is a ghost of the original element still there taking up space).
If the element has child elements that are absolutely positioned, they are now absolutely positioned within the context of this element.
Advantages
If all elements started out with relative positioning, all two of the items above you'd have naturally. Your top/right/bottom/left values work as you would assume they do right out of the box. Z-index "just works" as well. The positioning context is always constrained to the next parent element, which makes logical sense.
Disadvantages
Most notably, always constraining the positioning context to the parent element is limiting. Let's say you want to position an element in the upper right of the page regardless of where the element appears in the markup. That's going to be tough if the element is buried down the hierarchy. You'll need to reset that positioning context for every parent element. That means setting them back to position: static;, and losing all the benefits of relative positioning along the way.
static positioning is the default because it simply doesn't "interfere" with the positioning of any other element on the page. In that sense, it is the least disruptive state an element can have.
Also, when we are talking about the rendering of the web page which is a very costly and sophisticated operation - it's faster to just draw a page with a lot of static elements than otherwise positioned elements. Modern browsers definitely are very advanced in that regard, but it certainly played a role for browsers 20 years ago.
In terms of convenience: Imagine an element on a dynamic page which you want to position absolutely. You know, which element you want to position it to, but you don't know how many levels might be in between.
With static positioning, you just declare position:relative on your anchor element. With all elements having relative positioning you somehow would need to reposition all elements in between, giving you a hard time.
An element that has a high z-index may below another element that has a low z-index, only because the ancestors' z-index of the lower one provides a higher stacking context for this element.
Because of this, it's impossible to overlay an element from a lower stacking context without a major change in the CSS or HTML code. On the other hand, using the z-index property would be simples if it would be an "absolute" value (higher z-index -> higher position on the z axis).
My question is, why was this implemented this way in the browsers and the standards?
I think cwolves has the proper answer, and the way it is now it's probably the most logic.
To help understanding you can think of z-index like Photoshop layers.
If you have a folder of layers above another folder, the wrapped layers can't obviously be arranged outside their parents, unless you move them from a folder to another.
Or think of boxes: you can arrange things inside a box, but you can't arrange things from two different boxes, unless you move them from a box to another.
If you're running into the case where you need a different arrangement, you probably need to re-think your markup to allow this.
Is it possible to set z-index that only applies to a certain 'scope', such as only affecting children of a certain element.
I've got an containerDiv with z-index 0. It contains a bunch of circles which should be placed on top of eachother in various depths, but I don't want them to affect any other elements on the page.
I've got a bunch of other elements on the page (popups, dropdowns etc) which have z-index 1, and I would like them to be placed on top of the containerDiv and all of it's childelements.
Since I'm lazy I'd preferably want to avoid having to adjust these element's z-index values based on the circle with the highest z-index...
Much be awesome if there was some way that all other elements could view the containerDiv and all it's children as having the same z-index.
Is this possible to achieve with css?
The answer depends on whether or not your other elements are descendants of the containerDiv or not. To answer the question: Yes, it's almost certainly possible, given a bit of shuffling of the markup.
But what you need to understand is the concept of stacking context:
http://www.w3.org/TR/CSS2/visuren.html#layers
Stacking context is not inherited the way other properties are: "A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes." It's not like every element on the page with z-index:2 will be behind everything on the page with z-index:4. Z-index (combined with a position declaration) is typically (though not exclusively) used to resolve the stacking order when two elements share a containing element.