标签归档：z-index

z-index属性在旅游网站建设中也不常使用，以前这属性用于广告的浮动层比较多。z-index属性除了元素的x和y位置之外，每个元素还都有一个垂直位置，也就是z位置。 z位置更高的元素越靠近浏览者，其下的元素将变得非常模糊。z位置在整个文档中不是绝对的。相反，z位置是相对于包含元素而言的。例如，一个文档内的两个<div>元素在定位时可能会取决于彼此的顶部。 第一个<div>在z位置为1，而第二个<div>的z位置为2。 第二个<div>的整个内容都显示在第一个<div>的上面(或前面)。 如果第一个<div>内元素的z位置为3或4，它们仍然会显示在包含它们的<div>中，而且不会“跳”到第二个<div>的前面。 Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。 当然，除非元素已经被定位按照互相交叠的形式展现，否则元素的层叠顺序并不会特别的明显。下面的，负边距的BOX被拿来展示，用以说明自然的层叠顺序。 定位元素间的Z值比较及z-index在不同浏览器下默认值的影响 在ie下默认值(缺省)为：z-index:0; 而FF下则缺省为：z-index:auto; 1. z-index正是IE/FF下这一点区别导致ie,ff下z值的不同表现。 2. 正常情况下：兄弟（同级）元素后者居上，父子之间子高于父。 3. 对于定位元素，（不论IE还是FF）非同级关系和非父子关系元素之间的Z值大小比较，须要回溯至其为兄弟关系的两个祖先元素上，先比较这两个元素的z- index值，只有当“兄”的z-index大于“弟”的z-index值，“兄”的各个后代元素，才能超过“弟元素”及其子孙元素。 4. 对于IE,元素的z-index缺省值是0，如果不另外设置“兄”，“弟”元素的z-index值，那么”兄”的z-index就无法大于“弟”的z- index。那么”兄”元素及其子孙就无法盖过”弟”元素及其子孙。而一旦“兄”的z-index大过了”弟”元素的z-index,那么情况就翻转了，“弟”元素及其子孙将无法盖过“兄”元素及其子孙。 而对于火狐浏览器,元素的z-index缺省值是auto,auto的意思是什么，就是说“随便，不关我事”，那么子孙们的z值等级就只跟他们自己本身的z-index有关了。