使用z-index定位DIV

我目前正在尝试使用z-index以特定顺序定位某些DIV，但他们似乎并没有预先设置好，请在jsfiddle中设置它以供您查看如果你能看到任何问题。使用z-index定位DIV

这是我想它是从后到前的顺序：

RED 绿色 BLUE 黄色

HTML

<div id="green"> 

    <div id="yellow"> 
    </div> 

    <div id="red"> 
    </div> 

</div> 

<div id="blue"> 
</div>

C SS

#green{ 
    background-color:green; 
    height:100px; 
    width:100%; 
    position:fixed; 
    top:0; 
} 

#red { 
    margin:-85px auto 0; 
    width:406px; 
    height:60px; 
    background-color:red; 
z-index:-99999; 
} 

#blue{ 
    margin:350px auto 0; 
    width:60px; 
    height:465px; 
    z-index:99999; 
    background-color:blue; 
} 

#yellow { 
    margin:0px auto 0; 
    width:170px; 
    height:170px; 
    background-color:yellow; 
    z-index:99999; 
}

来源

2012-12-04 Gezzamondo

你的小提琴是不是所有你所拥有的在这里。 ??? – thatidiotguy

我认为你发布了错误的小提琴，如果你可以把代码放在那里，我相信更多的人会愿意玩它。 – Jason

http://jsfiddle.net/dKqSS/ – Madbreaks

您必须设置一个位置才能使z-index工作。添加相对于没有它的位置。对于蓝色和黄色也不要有相同的z-index，否则它不会知道选择哪一个。

http://jsfiddle.net/SzxT2/1/

#green{ 
    background-color:green; 
    height:100px; 
    width:100%; 
    position:fixed; 
    top:0; 
} 

#red { 
    margin:-85px auto 0; 
    width:406px; 
    height:60px; 
    background-color:red; 
z-index:-99999;  
    position:relative; 
} 

#blue{ 
    margin:350px auto 0; 
    width:60px; 
    height:465px; 
    z-index:99998; 
    background-color:blue; 
    position:relative; 
} 

#yellow { 
    margin:0px auto 0; 
    width:170px; 
    height:170px; 
    background-color:yellow; 
    z-index:99999; 
    position:relative; 
}

来源

2012-12-04 21:57:29

，但秩序仍然是不正确的。这里是我想要从后面到前面的命令：红色绿色蓝色黄色 – Gezzamondo

我的错误。我有一点固定：$。这是因为你有蓝色和黄色的Z指数。我固定我的css btw和小提琴。 –

除了具有定义你无法定义的z-index为将他放在他父母身后一个子元素的z index'ed元素的位置。（also see）

你看看以下工作： jsfiddle.net/BUWaZ/7/

HTML

<div id="green"> 
</div> 

<div id="yellow_placer"> 
    <div id="yellow"> 
    </div> 
</div> 

<div id="red_placer"> 
    <div id="red"> 
    </div> 
</div> 

<div id="blue"> 
</div>

CSS

#red { 
    margin:0 auto 0; 
    width:406px; 
    height:60px; 
    background-color:red; 
    position:relative; 
    z-index:100; 
} 
#red_placer { 
    width:100%; 
    position:fixed; 
    top:85px; 
    z-index:100; 
} 

#green{ 
    background-color:green; 
    height:100px; 
    width:100%; 
    top:0; 
    position:fixed; 
    z-index:200; 
} 

#blue{ 
    margin:30px auto 0; 
    width:60px; 
    height:465px; 
    background-color:blue; 
    position:relative; 
    z-index:300; 
} 

#yellow { 
    margin:0px auto 0; 
    width:170px; 
    height:170px; 
    background-color:yellow; 
    position:relative; 
    z-index:400; 
} 
#yellow_placer { 
    width:100%; 
    position:fixed; 
    top:0; 
    z-index:400; 
}

来源

2012-12-04 22:29:02 nienn

是的，你可以吗？ http://jsfiddle.net/SzxT2/1/ –

不知道在巫婆浏览器，你可能会得到正确的结果，但在我的（铬）你的代码给我'绿''红''黄''蓝''。他想要的订单是** RED GREEN BLUE YELLOW **。 – nienn

使用z-index定位DIV

回答

相关问题