ios html css,iOS开发html+css学习之元素的层级

.box1 {

width: 200px;

height: 200px;

background-color: red;

position: relative;

z-index: 2;

}

.box2 {

width: 200px;

height: 200px;

background-color: yellow;

/* 开启绝对定位，脱离文档流 */

position: absolute;

/* 设置偏移量 */

top: 100px;

left: 100px;

/*

如果定位元素的层级是一样，则下边的元素会盖住上边的

通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级

层级越高，越优先显示

对于没有开启定位的元素不能使用z-index

*/

z-index: 999;

}

.box3 {

width: 200px;

height: 200px;

background-color: yellowgreen;

position: relative;

z-index: 3;

}

.box4 {

width: 200px;

height: 200px;

background-color: orange;

position: relative;

/*

父元素的层级再高也不会盖住子元素

*/

z-index: 20;

}

.box5 {

width: 100px;

height: 100px;

background-color: skyblue;

position: absolute;

z-index: 10;

}