CSS z-index的用法
2018-06-24 01:46:13来源:未知 阅读 ()
理清 position及z-index的用法:
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,
z-index:其实从字面上已经可以解释;z是从x、y以后的第三个轴,从网页上表现就是除了上下左右外的前后。
规定这个属性,首先要求Div必须是浮动的,z值越大,Div越靠前;数值可以不连续。
例如
<div style="z-index:1000;background:red;color:white;width:200px;height:200px;">图层1</div>
<div style="z-index:100;background:yellow;color:blue;width:200px;height:200px;position:absolute;left:70px;top:120px;">图层2</div>
<div style="z-index:10;background:green;color:white;width:200px;height:200px;position:relative; left:30px;top:-150px;">图层3</div>
理论上图层1的z-index值设最大,应该排在最上面,由于它没有设浮动,遵循HTML定位规则
为什么图层3的top设负值呢?因为position:relative不能层叠,它应该是在图层1的下方,如果要它上去一点。只能设负值。而图层2设position:absolute浮动效果,它可以任意摆放,不受其它div影响,完全根据html页面定位
CSS样式表中Z-index属性使用的注意事项:
1、Z-index对定位层叠元素有效(如position:relative);
2、Z-index只可比较同级元素。这也许是大家很容易忽视的问题,我就卡在了这里。也就是说,Z-index只能对同级元素进行分层展示;
3、Z-index的作用域:假设A和B两个元素都设置了定位(相对定位、绝对定位、一个相对一个绝对定位都可以),且是同级元素,样式为:
.boxA{z-index:4}
.boxB{z-index:5}
于是,不难看出,元素B的层级要高于元素A,在此需要指出的是,A元素下面的子元素的层级也同样都低于B元素里的子元素,即使你将A元素里的子元素设为z-index:9999;同理元素B里的子元素,即使是设的z-index:1它照样比元素A的层级要高;
4、这个属性不会作用于窗口控件,如selected对象。
层级关系的比较:
1.对于同级元素, 默认 (或 position:static) 情况下文档流后面的元素会覆盖前面的.
2.对于同级元素, position 不为 static 且 z-index 存在的情况下 z-index 大的元素会覆盖 z-index 小的元素, 即 z-index 越大优先级越高.
3.IE6/7 下 position 不为 static, 且 z-index 不存在时 z-index 为 0, 除此之外的浏览器 z-index 为 auto.
4.z-index 为 auto 的元素不参与层级关系的比较, 由向上遍历至此且 z-index 不为 auto 的元素来参与比较.
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash