css中的定位与层级

相对定位

小技巧：div.box$*+tab

——

<divclass="box1"></div>

<divclass="box2"></div>

<divclass="box3"></div>

Position开启relative时，开启元素的相对定位：

1、  开启后不设置偏移量，不变化

2、  相对定位是相对于元素在文档流中的变化进行定位

3、  元素不会脱离文档流

4、  相对定位元素会提升一个层级

5、  不会改变元素性质

注：1、position属性为非static值

2、可通过设置left、right、bottom、top设置偏移量

3、通常确定一个元素的位置只需要两个值就可以

绝对定位

Position开启absolute时，开启绝对定位：

1、  开启后元素脱离文档流

2、  不设置偏移量位置不变化

3、  相对于浏览器窗口进行定位

4、  祖先元素没有开启，以浏览器窗口为主

5、  绝对定位使元素提升一个层级

6、  改变元素的性质

固定定位

Position开启fixed时，开启固定定位：

1、  固定定位是一种绝对定位

2、  不同的是，固定定位只相对于浏览器窗口就行定位

3、  固定在浏览器窗口的某个位置

4、  IE6不支持

元素的层级

注：

1、定位元素层级相同，下会盖住上

2、z-index：1，依次递增

3、父元素层级再高，也不会盖住子元素

opacity

Opacity设置颜色的透明：

1、0-1之间

2、IE8及以下不支持，需要使用filter：aipha（Opacity=50）

注：需要1-100之间的值

3、IE6中无法测试

背景

设置背景图片：

1、  图大于块，只显示左上

2、  background-image: url(相对路径);img/1.jpg ../img/1.jpg

3、  背景小于，重复平铺

4、  background-repeat: ;

76-背景二

background-attachment:inherit;

注：常见，博客，文字动，图片动

按钮练习

整合为一个图，通过background-position切换效果

优点：

1、  浏览器发送一次请求加载多图，效率提高

2、  减小图片总大小