z-index property not work

Question

Hi man I have following codes, and I wont to that when I\'ll click some button fadeTo only content without #some tag
In this case fadeTo<

Answer 1

In fact, they just have to be in the same stacking context. When you set a position and z-index attribute to an element, it creates a new stacking context for it. Then, It acts like any other elements. You don't need to repeat the z-index on its children

As you can see in this example, the child of the second div <div id="div2-2"> has the highest z-index z-index:4; But ! It is still "under" div3 because div3 has it own stacking context that is on top of div2 stacking context.

http://jsfiddle.net/TCHdevlp/r7nyL/

This mean that z-index are completly useless inside handly created stacking contexts.

Answer 2

z-index property only works on non-static positioned elements. i.e. you need to use one of relative, absolute, or fixed positions for the element.

In this case, you probably need position: relative; CSS declaration.

---

Honestly, I'm not sure about why you are using z-index in this case.

If you're going to exclude the #some element from being treated by .fadeTo() method, you could wrap the content of the #content by an element (or elements) and apply that method to them, as follows:

$(".button").click(function(){
    $("#content").find(':not(#some)').fadeTo(500,0.5);
});

HTML

<div id="content">
    <div id="some"></div>

    <p>This is a paragraph</p>
    <a href="">A link here</a> <br>
    <img src="http://placehold.it/50" alt="may be an image here">
</div>

WORKING DEMO.

Answer 3

I could be wrong, but im fairly certain that BOTH elements you want to include in the z-index must have non-static positioning.

So if you made your #content and #registration,#login non-static elements, it should work.

Answer 4

If you have 2 div like this <div class="a"> , <div class="b"> and both have a absolute position you can write z-index property

.a {
  z-index:1;
}
.b {
  z-index:2;
}

.a div is over .b div