元素的层级

z-index

.box{
    width:200px;
    height:200px;
    background-color:red;
    position:relative;
    z-index:3;
}
.box{
      width:200px;
      height:200px;
      background-color:block;
      position:absolute;
      left:100px;
      top:100px;
}
.box{
    width:200px;
    height:200px;
    background-color:#6a1752;
    position:relative;
    z-index:2;
}

如果没有开启定位的元素或者是定位为默认值,会忽略z-index的声明

2.父元素的层级再怎么高也不会盖住子元素,可以理解为(水涨船高)

opacity(透明)

box1{
      width:200px;
      height:200px;
      background-color:red;
      position:relative;
      opacity:50%;
      filter:alpha(opacity=50);
}
.box2{
      width:200px;
      height:200px;
      background-color:red;
        position:absolute;
      opacity:50%;
      filter:alpha(opacity=50);
      
}

1.opacity只能设置0-1之间的数值
2.filter:alpha(opacity=50)兼容IE浏览器

背景

.box{
    width:500px;
    height:500px;
    margin:0 auto;
    background-color:red;
    background-image:ur1(图片);
    backgound-repeat:no-repeat;
}

1.background-repeat:norepeat图片只显示一次
2.background-repeat:repeat-x背景将在水平方向重复
3.background-repeat:repeat-y背景将在垂直方向重复