下载此文档

css z-index层重叠顺序.doc


文档分类:IT计算机 | 页数:约3页 举报非法文档有奖
1/3
下载提示
  • 1.该资料是网友上传的,本站提供全文预览,预览什么样,下载就什么样。
  • 2.下载该文档所得收入归上传者、原创者。
  • 3.下载的文档,不会出现我们的网址水印。
1/3 下载此文档
文档列表 文档介绍
北大青鸟中关村软件园地址: 北京市海淀区上地信息路甲 28 号科实大厦 B座3 层( B305 ) css z-index 层重叠顺序 div css z-index 层重叠顺序 DIV 层、 span 层等 html 标签层重叠顺序样式 z-index ,平时我们使用较少,但也会难免会碰到 CSS z-index 使用。接下来 divcss5 介绍 z-index 从基本属性到设置对象的层叠顺序、重叠顺序,从基础语法到应用案例教程讲解学习 z-index 。一、 z-index 语法与结构- TOP z-index 跟具体数字如: div{z-index:100} 注意: z-index 的数值不跟单位。 z-index 的数字越高越靠前,并且值必须为整数和正数(正数的整数)。二、 z-index 使用条件- TOP Z-index 在使用绝对定位 position:absolute 属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列,我们就是要 z-index 样式属性。三、 z-index 应用案例- TOP 为了方便观察 z-index 样式属性,我们设置 3个 DIV 盒子,分别设置不同 css 背景颜色,设置相同 CSS 高度、 CSS 宽度。分别设置背景颜色为黑色、红色、蓝色。 CSS width 为 100 px , css height 为 50px 1 、案例 css 代码 1. /* -index 实例*/ 2. .divcss5{position:relative;} 3. .divcss5-1,.divcss5-2,.divcss5-3 4. {width:100px;height:50px;position:absolute;} 5. .divcss5-1{z-index:10;background:#000;left:10px;top:10px} 6. .divcss5-2{z-index:20;background:#F00;left:20px;top:20px} 7. .divcss5-3{z-index:15;background:#00F;left:30px;top:30px} 2、 html 代码片段北大青鸟中关村软件园地址: 北京市海淀区上地信息路甲 28 号科实大厦 B座3 层( B305 ) 1. <div class = "divcss5-1" ></div> 2. <div class = "divcss5-2" ></div> 3. <div class = "divcss5-3" ></div> 3、 z-index 案例截图 Z-

css z-index层重叠顺序 来自淘豆网m.daumloan.com转载请标明出处.

相关文档 更多>>
非法内容举报中心
文档信息
  • 页数3
  • 收藏数0 收藏
  • 顶次数0
  • 上传人yzhfg888
  • 文件大小0 KB
  • 时间2016-04-15