很多技巧都是在工作中测试出来的，我搞DIV+CSS前端开发，现在是安卓收藏家，日常也有很多技巧，刚刚突然发现的这个技巧，真的很实用：Z-index值可以使用负值。

z-index是个很强大的属性，是个很强大解决定位的利器，在一个较不错的页面里面，position会满天飞，什么相对定位relative，什么绝对定位absolute，这样混合到一起，在360浏览器、谷歌浏览器可能没有问题，但在IE6或者其它IE下，问题就多了，盖的盖住，挡的挡到，有些奇葩还半显示半不显示。

好了，回到正题，z-index使用负值的情况举例：两个层，同属不同的块里面，这样写z-index谁低谁高没有用。但是你一定要想把哪个放下面，除了其它办法，有个最简单的办法就是给它写个z-index:-1。

你测试下吧，保证能解决问题！

z-index 可以使用负值，CSS相对定位、绝对定位利器的更多相关文章

  1. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  2. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  3. CSS 相对定位 绝对定位

    css中的相对定位和绝对定位. 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将 ...

  4. CSS相对定位|绝对定位(五)之z-index篇——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1855 补充于2016 ...

  5. [css] CSS相对定位|绝对定位

    第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...

  6. HTML 学习笔记 CSS样式（相对定位 绝对定位）

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

  7. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  8. Day042---浮动 背景图设置 相对定位绝对定位

    1.练习浮动 2.文本属性和字体属性 文本对齐 ​ text-align left 左对齐 right 右对齐 center 中心对齐 justify 两边对齐 只适应于英文 text-indent ...

  9. CssStats – 分析和优化网站 CSS 代码的利器

    CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...

随机推荐

  1. hihoCoder 1432 : JiLi Number（吉利数）

    hihoCoder #1432 : JiLi Number(吉利数) 时间限制:1000ms 单点时限:1000ms 内存限制:256MB Description - 题目描述 Driver Ji l ...

  2. 理解RESTful

    REST全称为Representational State Transfer,可以翻译为“表现状态转换”,是由是Roy Thomas Fielding在他2000年的博士论文中提出的,目的是为了得到一 ...

  3. ArcGIS影像配准与空间配准

    ArcGIS影像配准与空间配准 ArcGIS影像配准与空间配准 地图配准可分为影像配准和空间配准.影像配准的对象是raster图,譬如TIFF图.配准后的图可以保存为ESRI GRID, TIFF,或 ...

  4. python成长之路【第十二篇】：RabbitMQ入门

    一.RabbitMQ介绍 解释RabbitMQ,就不得不提到AMQP(Advanced Message Queuing Protocol)协议. AMQP协议是一种基于网络的消息传输协议,它能够在应用 ...

  5. windows下如何安装和启动MySQL

    1.下载,解压到自己喜欢的目录 2.配置环境变量.MYSQL_HOME,值为mysql的根目录:在path中添加%MYSQL_HOME%/bin目录. 3.向windows注册mysql服务.必须用管 ...

  6. 老王讲自制RPC框架.(四.序列化与反序列化）

    #(序列化) 在实际的框架中,真正影响效率的就是数据的传输方式,以及传输的准备,或者说是tcp与http,序列化.当然要想提高整个框架的效率,需要采用一种高效的序列化 框架比如流行的protostuf ...

  7. HBase 数据读写流程

    HBase 数据读写流程 2016-10-18 杜亦舒 读数据 HBase的表是按行拆分为一个个 region 块儿,这些块儿被放置在各个 regionserver 中 假设现在想在用户表中获取 ro ...

  8. jquery TypeError: $(...).live is not a functio,动态添加class的点击事件处理

    jq版本更新后无live函数的处理.TypeError: $(...).live is not a function jquery live函数语法 jquery版本更新, 发现一个问题: jq自带的 ...

  9. [经验] Win7减肥攻略(删文件不删功能、简化优化系统不简优化性能)

    [经验] Win7减肥攻略(删文件不删功能.简化优化系统不简优化性能) ☆心梦无痕☆ 发表于 2014-1-24 11:15:04 https://www.itsk.com/thread-316471 ...

  10. struts 标签的使用<转>

    Struts2常用标签总结 一 介绍 1．Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的 ...