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
Related
Having a strange issue which has happened to me before but I couldn't figure out the issue either. I can work around it but I'd prefer to understand why it's happening so that I can fix the root issue.
The position of a element is changing between 1200px and 1999px as you can see here:
1200px:
1999px:
The element is behaving like there is a breakpoint at 1200 but there isn't and the css doesn't change either according to Chrome dev tools.
You can see that the margin and position change slightly but not enough to cause such a shift in position.
I am using Bootstrap in case that matters.
Does anyone have any idea what's causing this?
This is the problem:
margin-top: 1.5%
You have a percentage based margin value, therefore, on resize, the positioning of the H2 will vary.
If you don't want it to vary, change it to another unit, for example px.
Also, you might want to specify offsets properties (left/right, top/bottom) of the element:
absolute
The element is removed from the normal document flow; no space is created
for the element in the page layout. Instead, it is positioned relative
to its closest positioned ancestor if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left. This value
creates a new stacking context when the value of z-index is not auto.
Absolutely positioned boxes can have margins, and they do not collapse
with any other margins. Source MDN
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.
On one of the websites, I found that body element is set position: relative and the content inside body seem to be shifted downwards by a scale of margin-top CSS value set on the topmost element in body.
Why body has CSS 'position: relative' set? Is it intended to fix some bug? I heard that there was some IE bug where we were not able to set absolute positioning of elements.
Why 'margin-top' of 'only' the first element inside body affects the position of every element?
Javascript function 'getBoundingClientRect()' returns wrong value for any element as it does not consider this margin-top value set on topmost element.
1. Why does the body have CSS 'position:relative' set? Is it intended to fix some bug? I heard that there was some IE bug where we were not able to set absolute positioning of elements.
FC: That's not intended to fix a bug, but probably because one the (direct) children of the body element has position:absolute. Without the body having position:relative, that child would be positioned relative to the canvas (the browser inner window), rather than relative to the body element. See this tutorial ('Nested position:absolute') for the full story. There may have been IE bugs in that respect in the past, but as of IE8 IE behaves normally when it comes to this.
.
2. Why does 'margin-top' of 'only' the first element inside the body affect the position of every element?
FC: That is by design. Vertical margins affect the position of the subsequent sibling elements, a position:relative; top:20px does not. Again, see the mentioned tutorial for the full story.
.
3. Javascript function 'getBoundingClientRect()' returns wrong value for any element as it does not consider this margin-top value set on topmost element.
FC: That would also be by design, but I'm not sure whether you are interpreting matters correctly. Can you post some code to demonstrate it? What I do know is that you should be careful with that method. See this Dottoro page for the full story, including alternatives.
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.
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.