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.
Related
I am currently trying to create a landing page for a photoshop layout. I am quite new to HTML and CSS and I am having trouble solving this. My drop-down menu lists are getting covered by the content. I think it might be about positioning... Thanks
I will attach a picture and I will also share my code if needed...
Dropdown menu getting covered by content (positioning) IMAGE
As previously stated you can use z-index to determine how elements are rendered on top of each other. Elements with an higher z-index are on top of elements with a lower z-index.
According to the MDN docs:
The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.
Just but z-index:999; on your dropdown.
Objects with higher z-index number will go above those with lower numbers.
Add the CSS attribute z-index: 999; to your dropdown's CSS. Not necessarily should it be 999, but just that 999 is the maximum one can use in z-index.
The property of z-index is that a division with a higher z-index will be displayed above a division with a lower number in the z-index, therefore allowing you to decide the hierarchy of the appearance of different divisions.
To know more, visit https://www.w3schools.com/cssref/pr_pos_z-index.asp
If z-index is not solved, you can check nav container and if you found overflow-y you can comment that line.
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
The -webkit-box-reflect styling property does not seem to respect the z-index of its selector. Did I do something wrong or is it meant to be like that?
my #main_menu element has a z-index value of 1 while the elements beneath it have z-index values of 4 for the #action_menu and the #content. I also tried setting the z-index of the section itself higher and it didn't change anything.
Tldr; The reflection is shown above other elements with higher z-index. Why so?
Code below:
http://jsfiddle.net/uLrkq/
Your section has position: static;, give it position: relative; (for instance) and a z-index of 4.
The z-index property only works on positioned elements, or those that have an opacity value less than 1. These create what is known as a new stacking context.
In every case where you use z-index in your example, you neither position the element nor set its opacity. The best way to fix it would be to add position: relative to each declaration block that you use z-index. If you use relative positioning without specifying an offset, it will remain in the same position as it is now, but respect the z-index.
I have an HTML code with an error at some point that I cannot detect. Here is my JSFiddle.
In particular, when I move on "Show more", an absolute positioned div with highest z-index should be shown on top of everything. However, as you may see the first absolute positioned div is shown under other content.
As provided in answers from similar questions, I already set a z-index value and the position type (absolute or relative) for each container of the div.
Any idea to solve this problem?
Thanks to Ghost Answer comment, I solved the problem.
In other answers I read that one should put an increasing z-index value as well a position:relative to all the containers of a div that one would show on hover. Maybe it isn't always true.
Here is what I did:
I removed all the z-index values and unnecessary positioning (I suppose the latter is not meaningful).
I set z-index:auto to the container of the div that I would to show on hover.
Now the code works fine: this is the updated JSFiddle.
try this css
.offer-info-shops span
position:absolute;
z-index:1000;
JSFIDDLE
Interesting problem.
Change the following z-indices: .offer-content, .offer-content-info-shops{z-index:auto}
.detail-modal-window{z-index:1}
http://jsfiddle.net/gteEg/12/
By doing this, all the elements have their z-indices compared against each other.
The issue you had was because since you assigned a z-index to offer-content, and .offer-content-info-shops, you had created a stack context, meaning that child elements of .offer-content-info such as .detail-modal-window had their z-index compared to its siblings in .offer-content-info-shops.
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index
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.