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.
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 was trying to answer this question: How to make a colorful gradient glow around your input-box?
My problem and question is why does the rainbowBg div appear over the input and not behind it? I have tried positioning the input absolute, setting z-indexes, nothing worked.
<div class="rainbowWrap">
<div class="rainbowBg"></div>
<input class="rainbow" type="text"/>
</div>
Try typing in the input. You can only focus it if you click between the input border and the rainbowBg div. I have only tested in Chrome.
http://jsfiddle.net/b03acbdu/4/
z-index only works when you define position. Add "position: relative" to your rainbow class.
Just give the div a negative z-index. You can even remove z-index from the input then.
.rainbowBg {
z-index: -1;
}
http://jsfiddle.net/b03acbdu/6/
It goes behind the input because z-index is ingored for non-positioned elements and so givern a fixed value of 0. From MDN:
When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
In terms of z-index being relative to parent or the whole document, MDN again has a useful article describing The Stacking Context. The children of .rainbowWrap are put into their own stacking context, so because .rainbowBg is a child of it, it will always be "on top of" it's prent's background. Or as the article puts it better:
An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers.
z-index in negative is behaving improperly only in safari. is there any way to make the parent element upper than the child element using z-index?
When using z-index you should also apply the position property. Set it to relative or absolute Whatever is needed. The inherited display value is not enough for the browser to use z-index properly.
I made a barebones example of this here.
What causes this? By just applying a z-index to a div (in the example, .spread), mouse events are completely gone. In the plugin I'm working on, I need to use z-index for positioning, and I'd rather not make the user using my plugin try to work around this themselves in the future.
Basically, by simply applying
position:relative;
z-index:*anything less than 0)
Any and all mouse events will be nulled. Even if I try to add a positive z-index to just the as, it still doesn't work.
How can I fix this so I can put negative z-indexes on divs while still allowing the contents of them to be clickable/hoverable/whateverable?
Edit: Well I'm dumb. I didn't know body had it's own z-index, I just figured it'd be under everything (because why would you want anything beneath the entire page, just display:none it) Thanks everyone!
I believe a negative z-index positions the element behind the document's <body>.
Try this instead:
.spread { z-index: 1; }
header { z-index: 2; }
http://jsfiddle.net/uW9jk/3/
Don't use negative z-indexes. Changing the -2 in your example to a 0 or a 1 or anything else positive fixed the problem. Proof.
By setting a negative z-index your div element will be behind the body element, which by default have z-index: 0
This is confirmed by setting the z-index of the body. http://jsfiddle.net/uW9jk/5/
body{
z-index: -3;
position: relative;
}
Accordingly to docs.webplatform
Positive z-index values are positioned above a negative (or lesser value) z-index. Two objects with the same z-index are stacked
according to source order. A positive value positions the element
above text that has no defined z-index, and a negative value positions
it below. Set this parameter to null to remove the attribute. The
z-index property only applies to objects that have the position
property set to relative or absolute. The property does not apply to
windowed controls, such as select objects. Input from pointing
devices, such as a mouse, does not penetrate through overlapping
elements even if the elements are not visible. This is also true for
positioned elements with a negative z-index unless:
The parent is a scrolling container (that is, its overflow property is
set to auto or scroll). The parent is positioned (that is, its
position property is set to absolute, relative, or fixed).
Correction: the body element have z-index: auto by default, but make sense to interpret auto being a 0 or positive index since everything below 0 will be behind it.
Note: Negative z-index values are CSS2.1 behavior, not allowed in CSS2 and earlier.
Negative z-index Support: Webkit 1.0 | Gecko(FF) 3.0 | IE 4.0 | Opera 4.0
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.