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 involve #some tag

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


#content{
width:100%;
height:100%;
outline:1px solid red;
margin:auto;
z-index:0;}


#registration,#login{
    width:350px;
    height:300px;
    outline:1px solid blue;
    display:none;
    z-index:500;
    position:fixed;}


   $(".button").click(function(){ 
            $("#some").fadeToggle();
            $("#content").fadeTo(500,0.5);
 });

Answer 1

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 2

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.