html 定位z_index,CSS教程:网页布局定位及z-index解释

stack level 在火狐中的测试

#container {position:relative;left:100px;z-index:0;background: purple;width:500px;}

#container div {height:200px;width:200px;}

#box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-25px;left:-30px;}

#box-block {background-color: aliceblue;margin-top:-30px;margin-left:150px;}

#box-float {float:left;margin:-50px 100px 0 0;background-color: red;}

#box-inline {background-color: gray;display:inline;padding:50px 0;}

#box-p-za { position: absolute; top:50px;left:50px; background-color: green;}

#box-p-zp { position: relative;z-index:1;background-color: greenyellow;}

这个box position:relative;z-index:1;定位元素z-index值为正

这个box position:absolute;z-index:auto;定位元素z-index值auto

这个box inline;
inline元素

这个box float;

未定位的浮动元素

----这个box block;未定位的块级元素

这个box z-index:-1;定位元素z-index值为负

调试之用

-->

[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]