I must be a little bit foggy still on how z-index works because I have this jsFiddle and I can't seem to reorder some elements the way I need to. I want the red box to appear behind the text. Can someone explain how I can do this?
jsFiddle: http://jsfiddle.net/sightofnick/u2pa4/
The z-index is not in pixels, it's just an integer. Rather than z-index:10px, try z-index:10. Note also that this only applies to positioned elements, meaning those elements that have been set to either absolute or relative.
You have to use position:absolute | relative for the nav too
see this http://jsfiddle.net/u2pa4/4/
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 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
I am trying to absolutely position an element inside a table cell.
The TD has position:relative and the element has position:absolute.
This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container.
You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/
Does anyone know if I miss some CSS setting that can fix that in Firefox?
the element is not a block element.
add to the style display:block, you will get the needed behavior.
A possible work around would be to wrap the position:absolute element with another position:relative div. It requires an extra div, which is lame, but will give you the right result.
Example: http://jsfiddle.net/pTJUk/
Note -- this still won't give a completely correct result, as the position:relative div will be relative to the text position in the td -- crazy, right? Giving the cell a vertical-align:top will make it orient to 0,0, but of course this could be at the cost of other formatting your design requires.
It was a very old Firefox bug that have been fixed about 13 years after being reported!
You may refer to the entertaining history here:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
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.