前端基础技能提升-CSS实战第三天内容.pdfVIP

目录

目录2

1.2Z-index层级div层3

1.3背景半透明4

目录

目录.2

1.2Z‑index体系层.3

1.3背景半透明.4

1.1Z-index层级div层

只有定位的盒子（除了static）才有z-index

如果都是定位绝对定位他们默认的z-index是0

最后的一个靠上

!DOCTYPEhtml

html

headlang=en

metacharset=UTF-8

title/title

style

/*.test{

width:150px;

height:300px;

border:1pxsolid#ccc;

margin-top:100px;

float:left;

margin-left:-1px;

}

.test:hover{

border:1pxsolid#f40;

position:relative;

}*/

.test{

width:150px;

height:300px;

border:1pxsolid#ccc;

margin-top:100px;

float:left;

margin-left:-1px;

position:relative;

}

.test:hover{

border:1pxsolid#f40;

z-index:1;

}

/style

/head

body

1.1Z‑index体系层

唯一定位的盒子(除了静态)满足z‑index如果都是定

位绝对定位它们默认的z‑index是0最后的一个靠上

html

头郎=en

元字符集

标题/标题

风格

/*。测试{

高度：300px；

边框：1px实心#ccc；

左边距：-1px;

}

边框：1px实心#f40；

位置：相对；

}*/

。测试{

高度：300px；

边框：1px实心#ccc；

左边距：-1px;

位置：相对；

}