I have a problem at the css levels because I am testing the code via this site:
https://codepen.io/steveeeie/pen/NVWMEM . It works very well but at the level of my navbar, it goes above and not below when I scroll.
I noticed it's because of position: absolute but i'm trying to change it but it makes my navbar not fix at all at the top when scrolling.
Thank you in advance for your help :)
What you're referring to as a CSS level is actually called the z-index of an element.
You can read up on it here: z-index on MDN.
From MDN:
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
The gist of it is that because your navbar (presumably) comes before these cards in your markup it will be shown underneath the cards. To combat this, set the z-index on the navbar to a value that is higher than the cards. Like so:
.navbar {
/* [your other styles for your navbar] */
z-index: 1000;
}
So I know there are a plethora of questions about position fixed/relative/absolute in relation with z-index, but I still couldn't figure out my question using those.
Essentially I have a header that is fixed. It works perfectly fine, everything goes behind it when scrolling down the page.
I recently wanted to add links to div ids, but in order to account for the header, I had to add the following code where link is the parent element, and then linkTo is the class of something with an ID that we actually link to. This functionality works completely, providing the correct offset so that the header is above the div we want.
.link {position: relative;}
.linkTo {position: absolute; top: -80px;}
The problem with this, is that for some reason now my div is behind everything on the page. I can still see it but the text and images are in front.
I've tried adding z-index to my header (of like 9999) but it isn't working. I don't understand why adding position relative would mess up the order of how things are displayed.
I'd like to provide an example, but my code is rather large. If this isn't enough I can try to make a jfiddle later.
Add position: relative; z-index:9999 to the parent element it will keep this element stick inside the menu.
As Ganesh said, adding position: relative to the parent element of the header was the starting step. After that adding z-index to the same parent element fixed the problem completely.
Check for a lower z-index on a parent element, it appears to override the z-index of children.
I've run into z-index issues in the past with drop down menus and jquery UI tabs. I thought it had something to do with the stacking effects created us rules like opacity or transition, but for me the problem was a parent element having a lower z-index than a child element.
How does z-index actually work?
Does it function on elements with no specified position?
Does it favor elements (i.e. make them on top) that have a specified position?
Do the numbers have to be negative like this?
<div style='z-index:-2;'>below</div>
<div style='z-index:-1;'>less below</div>
<div style='z-index:0;'>on top</div>
Or not? Would all positive numbers (in increasing value) end up with the last being on the top, the middle in the middle, and the first on the bottom?
Both negative and positive integers are allowed.
The position must be set on the element.
Before I get into those details, though, let me explain z-index from the ground up.
Every webpage is made up of what are called stacking contexts. You can think of these as, quite literally, a stack of elements. The z-index property determines the order of items in each stack, with higher z-index being placed further up.
All pages begin with a root stacking context, which builds from the root element (as you'd expect). But more stacking contexts can be created in a number of ways. One way is an absolutely positioned div; its children will be in a new stacking context.
The specs lists all of the instances that create a new stacking context. As others have stated, this includes explicitly positioned elements and will soon include elements that aren't completely opaque.
As I said before, z-index only takes effect if you explicitly set the position of the element. This means setting it to be fixed, absolute, or relative. This is best shown through example, I think.
In this example, we'd expect the blue div to be on top of the grey one given its z-index, right? But, as you can see, it's on the bottom. This is, of course, because we haven't set its position. Once we do that it displays as we'd expect. Again, you must set the position.
The specs also tell us that negative values are fine. With that said, you don't need to use negative values. It's perfectly fine to use positive integers, too. The default z-index value for an element is 0.
For the record, w3schools is a notoriously unreliable source for learning. While it can be a quick and convenient resource, there are lots of gaps in their information, and at times even wrong information. I recommend you to use more reliable sources like the Mozilla Developer Network, and also the specs themselves.
Before I start explaining, let me note that z-index only has an affect if the element has rendered value of position:relative, position:absolute, or position:fixed (NOT static) because each of these make it have its own stacking context. That means that values like initial or inherit may or may not work either depending on the situation.
Also note that in this post I'll be using the format 1.1.1 to signify that I am selecting the first element's first child's first child. 2.1.1 would be the second element's first child's first child and so on.
I think z-index is best explained with an analogy using sub lists. Let's start with the simplest example:
<div class="top-level"></div>
<div class="top-level sibling"></div>
We can represent this in terms of a list like so:
Top level
Top level sibling
Now by default the ones further down the list will render on top of the ones before it. So in this case 2 will be positioned on top of 1.
What z-index allows us to do is essentially reorder this list (within some bounds). The higher the z-index, the further down the list our element is.
I'll use inline CSS here to make showing it easy but you should definitely avoid inline CSS in production code.
<div class="top-level" style="z-index: 1;"></div>
<div class="top-level sibling"></div>
This now changes our sub listing to look like this:
Top level sibling
Top level - z-index:1
Great! Now the first element in our HTML will render on top of our second.
Where this gets more tricky is when we're dealing with children (nested) elements.
An easier way to think about this situation is to think that when an element starts being rendered it will render all children of the element before moving onto any siblings.
Also keep in mind that sub-lists cannot change levels, meaning they cannot be on the same level of their parent or their children elements.
That means that if we have the following:
<div class="top-level">
<div class="sub-level" style="z-index: 1;"></div>
</div>
<div class="top-level sibling"></div>
Our rendering sub lists will look like the following:
Top level
Sub level - z-index1
Top level sibling
Thus, we look our top level and see which one is at the bottom of the list. In this case, 2.0 is, so it will be on top of 1.0. Then we look and see if it has any sub lists (children). It doesn't, so we go to 1.0.
1.0 has a child, 1.1, which will be visually above 1.0 (just like it would be if we didn't give it a z-index), but it will still be below 2.0 because 1.0 is below 2.0.
Thus the z-index here doesn't help us out because 1.1 doesn't have any siblings.
Let's take a slightly more complex example:
<div class="top-level">
<div class="sub-level" style="z-index: 2;"></div>
<div class="sub-level sibling"></div>
<div class="sub-level sibling" style="z-index: 1;"></div>
</div>
<div class="top-level sibling">
<div class="sub-level"></div>
</div>
What's the sub listing for this example?
I'll give it to you, but it's good to try and do by yourself.
Top level
Sub level sibling
Sub level sibling - z-index1
Sub level - z-index2
Top level sibling
Sub level
Thus, in terms of what the order is visually from top to bottom, the order goes 2.1, 2.0, 1.3, 1.2. 1.1, 1.0.
That's not so bad, is it?
This behavior is true no matter how far deep or how many siblings are there.
The only exception to the rule that children are rendered above parents is when the children have a negative z-index. When a negative z-index is given, it places itself below a parent element.
Thus if we have the following:
<div class="top-level">
<div class="sub-level" style="z-index: -1;"></div>
</div>
<div class="top-level sibling"></div>
The sub list tree would look like this:
Sub level - z-index-1
Top level
Top level sibling
And the top to bottom layering would be 2.0, 1.0, 1.1.
A slightly more complex example:
<div class="top-level">
<div class="sub-level" style="z-index: -1;"></div>
<div class="sub-level sibling"></div>
</div>
<div class="top-level sibling"></div>
List representation:
Sub level - z-index-1
Top level
Sub level
Top level sibling
But you should avoid negative z-indexes. If you think you need them it is likely that your HTML is structured improperly.
That's about it! If you're still interested in learning more, reading the specs is always good.
Keep in mind that other properties, including but not limited to opacity, transform, and will-change, create their own stacking context and may have an affect on the rendering order of elements.
opacity works similarly to z-index - a child can only be as opaque as its parent - but it can't have negative values.
The only exception to the rule that children are rendered above parents is when the children have a negative z-index. When a negative z-index is given, it places itself below a parent element.
The css property z-index only works on positioned elements, meaning elements must be position absolute, fixed or relative in order for the z-index property to take effect.
The higher the z-index the closer to the front it will appear. The values specified for the z-index property can be positive or negative. A positioned element with a z-index value of 4 will appear above a positioned element with a z-index value of 3.
In CSS 2.1, each box has a position in three dimensions. In addition
to their horizontal and vertical positions, boxes lie along a "z-axis"
and are formatted one on top of the other. Z-axis positions are
particularly relevant when boxes overlap visually.
This article on z-index is just the link you are looking for! He really explains it well.
Basically, the higher the number, the higher up on the stack the element will be. So 1 is on top of 0 and -1 is under the z-index of 0, however they should be kept positive, as there is no reason to use negatives; it's considered bad practice. The browser interprets it when it renders the page, like any other CSS or HTML code.
What would make a html element e.g. an ul aboslutely positioned with a zindex of say 5000 to appear below a div of a lower zindex say 0? This behaviour is seen in IE8.
Just because it has a higher z-index doesn't mean it'll be on top. You have to take into account the parent's stacking level and this becomes the stacking context. Try giving a non-static position ( relative ) to the parent of the 5000.
If that doesn't work, post the relevant HTML.
Look at this example Absolute elements ignore z-index in IE6 and IE7. May be you will find something usfull in this sample.
Open up http://irule.at/quovadis, and it will show you a regular theme. The problem is that the div photos is not showing up. It's most likely hiding behind body/html because of the z-index, but I want them to show behind the divs in the middle. How do I fix this?
It looks like you're using a negative z-index for photos. Instead of that, use a positive or 0 index, and give the other elements a higher index. Also remember that in order for z-index to work the elements should have position: relative. I got photos to show up by having it z-index 1, having header z-index 2 and position relative.
You've had an answer, but thought I'd chip in a little to clear things up.
Z-indexing requires an element to be positioned, not necessarily relative or absolute as you've already figured out, but fixed is also an option.