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背景将在垂直方向重复
