z-index生效与css层叠

本文详细介绍了CSS中z-index属性的工作原理及其与层叠上下文的关系。解释了z-index仅对设置了定位的元素生效,并且需要配合position属性使用。同时介绍了层叠上下文的创建方法以及如何通过z-index实现元素的层级控制。
  1. z-index 的默认值为 auto,可以设置正整数,也可以设置为负整数。
  2. 只有定位的元素(即position属性值不是static的元素)的z-index才会起作用。
  3. Position属性四个值:static、fixed、absolute和relative
  4. static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
  5. fixed,absolute,relative,可通过z-index进行层次分级。
  6. z-index不生效的情况:

1.在用z-index的时候,该元素没有没有设置position:relative/fixd/absolute
2.在有定位的情况下,该元素的z-index没有生效,是因为该元素的子元素后来居上,盖住了该元素,解决方式:将盖住该元素的子元素的z-index设置为负数,而该元素不设z-index属性.

层叠上下文,层叠等级:css层叠详细讲解
层叠上下文也基本上是有一些特定的 CSS 属性创建的,一般有 3 种方法:
1.本身 j 就具有层叠上下文,称为“根层叠上下文”。
2.普通元素设置position属性为非static值并设置z-index属性为具体数值,产生层叠上下文。
3.CSS3 中的新属性也可以产生层叠上下文。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值