The z-index property does not work

Question

Hi, I have the following codes, and I'm used to it when I press the button fadeToonly content without a tag #some
In this case, fadeToincludes a tag#some

<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

If you have 2 divs like this <div class="a">one <div class="b"> and both have a position absoluteyou can write a propertyz-index

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

.adiv more .bdiv

Answer 2

z-indexthe property only works on non-static positioned elements. those. you need to use one of the positions relative, absoluteor fixedfor an element.

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

---

, , z-index .

#some .fadeTo(), #content ( )

$(".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>

.

Answer 3

, , BOTH, z-index, .

, #content # , # , .

Answer 4

, . position z-index , . . z-index

, div <div id="div2-2"> z-index z-index:4; But! - " " div3, div3 , div2 .

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

, z-index .