0532-88781131
、
18562723728
联系我们
交费方式
公司介绍
首 页
系统介绍
最新动态
项目分析
购买系统
系统演示
数据大师
空间代购
返回贴子列表
发表新贴
主题:
简洁的网页设计帮你拉顾客
共有
1278
人浏览过本贴
主贴管理
置 顶
加 精
结 贴
转 贴
昵称:YPS行业门户系统
论坛积分:108000
发贴等级:
21
发贴数:1122
回贴数:0
被砸鸡蛋:
0
获赠鲜花:
125
我的小屋
发表时间:2020/8/22 12:41:00
楼 主
简洁的网页设计帮你拉顾客
声明
定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。平台:win/IEwin/FF
z-index:
用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序
值:auto|整数|inherit默认:auto适用于:定位元素继承性:no
理解stackingcontext
每个box都归属于一个stackingcontext,它是元素在z轴方向上定位的参考。根元素形成rootstackingcontext,其他stackingcontext由定位元素设置z-index为非auto时产生。如#div1{position:relative;z-index:0;}即可使id=div1的元素产生stackingcontext。stackingcontext和containingblock并没有必然联系。
理解stacklevel
在一个stackingcontext中的每个box,都有一个stacklevel(即层叠级别,以下统一用stacklevel),它决定着在同一stackingcontext中每个box在z轴上的显示顺序。同一stackingcontext中,stacklevel值大的显示在上,stacklevel值小的显示在下,同一stacklevel的遵循后来居上的原则(back-to-front)。不同stackingcontext中,元素显示顺序以父级的stackingcontext的stacklevel来决定显示的先后情况。于自身stacklevel无关。注意stacklevel和z-index并不是统一概念。(将在后文慢慢理解)
stacklevel规则
每个stackingcontext中可包含块级(block)元素、内联(行内inline)元素,还有设置float属性的元素、定位元素等等他们在同一父级stackingcontext中的显示顺序是怎样的?即stacklevel是怎样的呢?比如一个块级元素和内联元素发生层叠的话谁会在上面呢?是不是谁在后面谁就在上面呢?
根据w3c关于stacklevel的介绍可以得出以下stacklevel规则
每个stackingcontext都包括以下stacklevel(后来居上):
父级stackingcontext的背景、边界
z-index值为负值的定位元素(值越小越在下)
文本流中非定位的、block块级子元素
文本流中非定位的、float浮动子元素
仿佛能产生stackingcontext的inline元素否则,inline元素的stacklevel将在block元素之前。
z-index:auto/0的定位元素
z-index值为正的定位元素(值越大越在上)
以上stacklevel在浏览器执行情况:
firefox3.0下测试完全吻合,firefox2.0下稍有不同即:“z-index值为负值的定位元素”在“父级stackingcontext的背景、边界”之前。ie6.0和7.0中:inline元素的stacklevel位于block元素之前,且“文本流中非定位的、float浮动子元素”(以下简称浮动元素)和“文本流中非定位的、block块级子元素”(以下简称block元素)处于同一级。
回复此贴
单贴管理
修 改
删 除
清理签名
TOP
共
0
个回贴 分
0
页
上一页 / 下一页 当前第
页
YPS行业门户系统咨询热线:
0532-88781131
15166683288
13963906391
专业提供大型
行业门户网站建设
系统+地方门户网站系统. 做
门户网站
,就用YPS系统!
鲁ICP备13010283号-1
青岛雨后网络科技有限公司 ©2011-2024 , 版权所有
YPS门户系统价格
交费常见问题
在线支付
银行汇款/ATM机转账
微信/支付宝 扫码
公司介绍
联系我们
诚聘英才
媒体报道