css样式,层叠顺序属性z-index

在做项目的时候,居然单击后显示的顺序一直被别的li标签压着,最后终于找到了,是css的z-index属性赋值了,值越大,显示的层就越高

详情推荐百度百科:z-index

z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

引用方法

z-index : auto | number

auto:默认值。

number: 无单位的整数值,可为负数 。

z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。

注意事项

这个属性不会作用于窗口控件,如 select 对象。

在IE5.5+中, iframe 对象开始支持此属性。而在之前的浏览器版本中, iframe 对象是窗口控件,会忽略此属性。

z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack order)。

每一个定位元素都归属于一个stacking context。根元素形成root stacking context,而其他的stacking context则由定位元素产生(此定位元素的z-index被定义一个非auto的z-index值),定位子元素会以这个local stacking context为参考,用相同的规则来决定层叠顺序。并且stacking context和 containing block 之间并没有必然联系。

当stacking context一样的时候,就用z-index的值来决定怎样显示,如果z-index也相同(即stack level相同),则按照档中后来者居上的原则(back-to-front )的顺序来层叠。

当任何一个元素层叠另一个包含在不同stacking context元素时,则会以stacking context的层叠级别(stack level)来决定显示的先后情况。也就是说,在相同的stacking context下才会用z-index来决定先后,不同时则由stacking context的z-index来决定。例如:

定位元素A(z-index:100)里面有定位元素A1(z-index:300),而定位元素B和元素A兄弟关系(z-index:200)。你会发现无论A1的z-index是多大,也会被z-index是200的B所覆盖,因为A的z-index只有100。

时间: 2024-10-23 02:03:35

css样式,层叠顺序属性z-index的相关文章

深入解析CSS样式层叠权重值(转)

前言:折腾了半天圆角,发觉border-radius是css3的新特性,简单粗暴的解决了button的圆角显示,中间由于css权重问题,导致即使我设置了圆角也一直没有生效.以下是找到的相当不错的一篇css样式权重讲解的,清晰明了,看完就懂是啥了. 永记在心: important > 内联 > ID > 类|属性|伪类 > 标签|伪元素  > 通配符 > 继承  (相对于原文的调整  属性选择和为对象均与类并列~) 简单记住这几个就够用了: important >

css的层叠顺序

层叠顺序的基本原则是用一般选择器设置文档总体样式,用特殊选择器覆盖一般选择器,从而设置特殊样式. 下面是优先级又高到低排列的6种选择器分组: 1.添加了!important规则的分组享有最高优先级: 2.第二优先级分组是style属性所嵌入的规则: 3.第三个优先级分组是具有一个或多个ID属性选择器的规则: 4.第四优先级分组是一个或多个类.属性或伪选择器的规则: 5.第五优先级是具有一个或多个元素选择器的规则: 6.最低优先级是指那些只包含通配符选择器的规则.

CSS样式书写顺序

CSS样式还有书写顺序? 样式还有书写顺序?样式这么简单的东西,不是随便写写就行的么.很多初学者,甚至有一定工作经验的人都会发出这种疑问.而样式的书写顺序到底对页面有没有影响呢?答案是肯定的.如何写出好的css样式也是一个优秀的开发者必须要知道的!而且应该养成习惯,融入到开发中!好的习惯不是一点养成的. 为什么要注意书写顺序? 减少浏览器reflow(回流),提升浏览器渲染dom的性能 浏览器渲染原理 ①:解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css

深入解析CSS样式层叠权重值

本文为转载内容,源地址:http://www.ofcss.com/2011/05/26/css-cascade-specificity.html 读到<重新认识CSS的权重>这篇,在文章最后给出了便于记忆的顺序: “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”. 那么这个顺序是怎么得出来的呢?实际上在CSS2规范关于具体性(specificity)的定义中,描述是非常明确的,但是很

第一周复习二 (CSS样式表及其属性)

样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head></head>标签内.个人感觉多用于较多或通用的一类标签,用来减少工作量 <style type="text/css"> {} </style> 分为三种: 标签选择器 <style type="text/css">

CSS样式层叠和特殊性

层叠 同一个元素可以设置多个样式,就会有冲突,用层叠来解决样式冲突; 层叠给每个规则设置了重要度: 标有 ! important 的用户样式: 标有!important 的作者样式: 作者样式: 用户样式: 浏览器样式. 特殊性: 特殊性决定样式次序,具有特殊性的规则优于一般选择器.特殊性相同,位于后者的规则胜出.给每个规则分配一个数字,将数字加在一起,就是样式的特殊性.特殊性的计算不以10为基数,一个规则的选择器往往少于10个,以10基数比较特殊性更为方便些. 选择器的特殊性分为4个等级: 选

css样式覆盖顺序

0.样式位置分类 1)使用外部css文件 <link href="/static/css/main.css" rel="stylesheet"> 2)使用head中的style元素 <head> <style type="text/css"> .main{color:red;} </style> </head> 3)使用元素上的style <body style="col

[笔记]CSS样式声明顺序

来自Bootstrap中文网编程规范 相关的属性声明应当归为一组,并按照下面的顺序排列: Positioning Box model Typographic Visual .declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width:

为什么有时候Css样式表某个属性引用不成功?

首次使用博客,很多东西都在探索,第一篇文章也不知道发布点什么,就随便写写,是在word里面写的,也懒得排版,将就这用吧. 闲着没事找了酷狗的API写了个简单的静态网页,完成了搜索,展示,播放功能.就想着给搜索框写一个搜索推荐的下拉列表框,思路很明确,不写了画图 代码如下 样式表 可是在引用样式表的时候suggbox的样式怎么都运行不出来结果,还特意加了边框背景.但是其它的引用都正常,如图没有边框背景 调试查看也有引用suggest,可并没有发现属性 试着在div里面加了style 居然有效果,那