I have a webpage that I need to modify, the background, which is currently absolute positioned with z-index to push it back, needs to stay put when scrolling, i need to change it to fixed, yet doing so seems to break z-index and push the content below it vertically. Any ideas?
edit:
OK I managed to get it to work in FF, but IE is still broken...
Maybe look at the rules below for how elements are stacked.
The Stacking order and stacking context rules below are from this link
Stacking Order within a Stacking Context
The order of elements:
The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules below)
You cannot put a child element behind a root stacking context element
Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
Non-positioned elements (ordered by appearance in the HTML)
Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
When a Stacking Context is Formed
When an element is the root element of a document (the <html> element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
Made a quick test. In its simplest form z-index doesn't break when using position: fixed;.
Perhaps you can put the background that is already there in a wrapper for the whole page and use the gradient background on the body instead.
Depending on the gradient, you can also try using a css3 gradient on the background of the body (or simply multiple backgrounds...) and use css3pie to make it work in IE.
Related
in MDN web docs it is mentioned that stacking context is formed in these scenarios:
Element with a opacity value less than 1
Element with a will-change value specifying any property that would create a stacking context on non-initial value
but when I set will-change to opacity (non-initial value of less than 1) the stacking doesn't work as expected (blue div below red one), see this fiddle
some other scenarios works as expected like; blue div above red one (links to fiddles)
Element with a position value absolute or relative and z-index value other than auto
Element that is a child of a grid container, with z-index value other than auto
what am I doing wrong, and is there any other way to make stacking context works as expected
I'm asking because sometime I can't change the position to relative as this will affect the absolute children of that element
The stacking (creation of a new layer) is actually working.
The problem is that z-index works only for:
Positioned elements (absolute, relative, fixed, sticky).
Children elements of a flex container.
No matter if you set z-index: 30, at the end it will remain at its default value, auto.
I am a little confused about using z-index to decide stack order.
I do not quite understand how browsers treat elements with the position property in conjunction to those without it.
Is there a general rule to decide the stack order of elements whether it has explicitly positioned elements or not?
Examples of different situations are appreciated. Generally speaking:
mixed sibling <div>s with position set and without position set.
nested <div>s mixed with sibling <div>s with position set and without position set.
Basics of the CSS z-index property
A Simple Concept
The z-index property is based on a simple concept: Elements with higher values will sit in front of elements with lower values along the z-axis. So if you apply z-index: 1 to div.box1, and div.box2 has a z-index: 0, then div.box1 will overlay div.box2.
In terms of the z-axis, it refers to depth on a three-dimensional plane. On your computer it can be interpreted as the plane on which objects move closer and farther from you. (Learn more about the Cartesian coordinate system.)
Source: Wikipedia
z-index works on positioned elements
Unless you're dealing with flex items or grid items, the z-index property works only on positioned elements. This means you can use z-index on elements with position: absolute, position: relative, position: fixed or position: sticky. If the element has position: static (the default value), or some other positioning scheme like a float, then z-index will have no effect.
As noted, although z-index, as defined in CSS 2.1, applies only to positioned elements, flex items and grid items can create a stacking context even when position is static.
4.3. Flex Item Z-Ordering
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw
document order, and z-index values other than auto create a stacking context even if position is static.
5.4. Z-axis Ordering: the z-index property
The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is
used in place of raw document order, and z-index values other than auto create a stacking context even if
position is static.
Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
Stacking Contexts
Once an element is positioned and a z-index is applied, a stacking context is created.
(Also see: Full list of circumstances where a stacking context is created.)
The stacking context is a set of rules for managing the positioned element with z-index, and its descendants. These rules govern the placement of child elements in the stacking order and the scope of the property's influence.
Essentially, the stacking context limits the z-index scope to the element itself, and its child elements cannot affect the stacking order of elements in another stacking context.
If you've ever tried to apply increasingly higher z-index values only to find that the element never moves out in front, you could be trying to overlay an element in a different stacking context.
Groups of elements with a common parent that move forward or backward
together in the stacking order make up what is known as a stacking
context. A full understanding of stacking contexts is key to really
grasping how z-index and the stacking order work.
Every stacking context has a single HTML element as its root element.
When a new stacking context is formed on an element, that stacking
context confines all of its child elements to a particular place in
the stacking order. That means that if an element is contained in a
stacking context at the bottom of the stacking order, there is no way
to get it to appear in front of another element in a different
stacking context that is higher in the stacking order, even with a
z-index of a billion!
~ What No One Told You About Z-Index
Stacking Order
CSS adheres to a stacking order when laying out elements on a page. These are the stacking rules when there is no z-index specified, from farthest to closest:
Backgrounds and borders of the root element
Non-positioned, non-floating block elements, in the order they appear in the source code
Non-positioned floating elements, in the order they appear in the source code
Inline elements
Positioned elements, in the order they appear in the source code
If a z-index property is applied, the stacking order is modified:
Backgrounds and borders of the root element
Positioned elements with a z-index of less than 0
Non-positioned, non-floating block elements, in the order they appear in the source code
Non-positioned floating elements, in the order they appear in the source code
Inline elements
Positioned elements, in the order they appear in the source code
Positioned elements with z-index of greater than 0
Source: W3C
Bottom line: Once you understand stacking contexts, z-index is easy.
For examples of z-index in action see: How z-index works!
For a brief but highly informative article explaining z-index (including how opacity affects the stacking order) see: What No One Told You About Z-Index
For a complete rundown on z-index, with many examples and illustrations, see: MDN Understanding CSS z-index
And for a deep dive into stacking contexts read: W3C Elaborate description of Stacking Contexts
I was trying to reproduce this tutorial for a responsive menu. It all worked well, but I tried to keep the menu fixed on the top of the page for one of my projects. Unfortunately the hidden menu when fixed, do not change the z-index after the hover.
#icon_cont ul{
background-color: #cccccc;
margin-top: 75px;
z-index:-2; /**THIS DOES NOT APPLY**/
position: absolute;
top:100%;
padding: 0;
right: 0;
}
I tried in every way but it didn't work at all.
You can see in this example that when the container has relative position, it works, but when it's with the fixed position, the menu does not stay behind the other elements.
Appreciate, any help!
The reason is because you're applying postion: fixed; to the element. Fixing a position pushes to the front of the z-index stack. Here are the basic rules for understanding how the stacking order works:
The stacking context’s root element
Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
Non-positioned elements (ordered by appearance in the HTML)
Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
(Taken from Philip Walton's invaluable post, "What No One Told You About Z-Index")
When you apply position: fixed; to an element, it sits in front of all relatively position items. Z-index values are relative to their "stack", not globally.
Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!
New stacking contexts can be formed on an element in one of three ways:
When an element is the root element of a document (the <html> element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
(Emphasis mine)
The title is fairly self explanatory. Additional details to consider are...
The element i'm applying the css to will be position:relative
The element will be embedded onto a web page
I'm using left: -9999px to move the element off screen temporarily
The element may or may not move 'over' or 'through' other elements on the page.
Will doing this have any negative effects such as altering the layout/placement of other elements on the page?
Thanks
In most cases, offsetting a relatively-positioned element will not affect the layout of other elements in the same flow, because other elements will only respect the "original" position of the element (i.e. the position if it had not been offset). The offset properties only create a visual effect on the element being offset. From the spec:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap.
However, the spec does point out an edge case (immediately after the above portion):
... However, if relative positioning causes an 'overflow:auto' or 'overflow:scroll' box to have overflow, the UA must allow the user to access this content (at its offset position), which, through the creation of scrollbars, may affect layout.
For example, scrollbars can reduce the width of a container and cause other elements to wrap where they otherwise would not.
No.
From MDN:
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
As you can see in this Demo, the relatively positioned element simply overlaps other elements, without affecting the original layout - the other elements stays as it was previously (other than the fact that currently it's overlapped, obviously).
i have made a scrolling manu and when I try to select it the list of the menu goes behind of an object (a simple music player). How can i put that object in lower level? I know I should use z-index command but i don't know the value. I tried them all.
z-index:0;
z-index:1;
z-index:auto;
Whatelse can I use?
It's worth noting that z-index is only obeyed on positioned elements (absolute, relative, or fixed). If you put a z-index on a non-positioned (static) element, it will be ignored.
The value of z-index is any integer or auto;
z-index only works on explicitly positioned elements with a position of absolute, relative or fixed.
additionally, their 'stacking context' is relative to their position in the DOM. two sibling elements are in the same stacking context, but their children elements are in a new stacking context (so if you have two sibling parents with z-index: 1, and one of them has an immediate child with z-index: 1 and the other has an immediate child with z-index: 2, the latter will have the higher z-index because its stacking context is 1-2 versus 1-1. However if for example you have two parent sibling elements where one has a higher z-index than the other, no descendant of the parent with the lower z-index will ever have a higher z-index than children of the parent with the higher z-index, even if you set the former's children to z-index: 500 or something like that. Basically stacking contexts exist at each level of the DOM and their effects cascade to all of the lower stacking contexts generated by their descendants.
z-index is tricky to master and requires a lot of attention to the markup and DOM structure. you need to post all of the relevant CSS and HTML in order for us to help you.
You can read some more about z-index on Mozilla Developer Network