CSS 层级

html-css014

CSS 层级,第1张

层级 Z-index

特点:

1、有定位属性的元素谁在上面,比的是Z-index值,谁的值大,谁就在上面

2、有定位属性的元素默认层级是0,如果层级一样,则后来者居上。

3、只有 有定位属性的元素才有层级的概念

4、只有亲兄弟元素才能比较层级

例子:

比较前

比较后

比较后为什么还是y在上面吗?不是y先进行定位的吗?

其实这个跟那个元素先定位没有关系,只跟你定义元素的先后有关系,

虽然你CSS没有写定位,可是层级是默认的

把x的层级定为2之后 请看效果

css代码

.C{ float:leftwidth:100pxheight:100pxbackground-color:red}

.D{ width:100pxheight:120pxbackground-color:green}

html代码

<div class="C"></div>

<div class="D"></div>

这个好像局限性很大,只有前面一个元素浮动了,后面一个还在文档流里的会到它下面去,也不能用z-index让它上来,因为z-index好像是对定位元素才有效果,不过反正是一个在另一个上面了,(*^__^*) 嘻嘻……