源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] margin 负值引起的层级(z-index)问题

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2009-6-3 02:16:59 | 显示全部楼层 |阅读模式
这篇文章主要为大家介绍margin 负值引起的层级(z-index)问题的解决方法,需要的朋友可以参考下 先来看这么一段代码:

复制代码代码如下:
<div style="height:100px;width:200px; border: solid 1px black; ">
<div style="background-color:Red;margin-top: -5px " mce_style="background-color:Red;margin-top: -5px ">
<a href="https://www.jb51.net/" mce_href="https://www.jb51.net/">脚本之家</a></div>
</div>

IE6和IE7下,内层的容器被外层覆盖,如图所示:

0221060.png

0221060.png

在IE8和ff下,外层的容器被内层覆盖,如图所示:

0221061.png

0221061.png

真是疯狂啊,如果要达到IE8的外层的容器被内层覆盖的效果,ie7可以通过触发内层的layout解决,,但是IE6却不行,只能在内层使用position:relative来解决问题,当然position:relative也解决ie7的问题,因为position:relative本身就能触发layout。
看代码:

复制代码代码如下:
<div style="height:100px;width:200px; border: solid 1px black; ">
<div style="background-color:Red;margin-top: -5px;position:relative" mce_style="background-color:Red;margin-top: -5px;position:relative">
<a href="https://www.jb51.net/" mce_href="https://www.jb51.net/">脚本之家</a> </div>
</div>

当然要IE8、FF达到IE6、IE7的效果就只要在外层加overflow:hidden 就可以了,看代码

复制代码代码如下:
<div style="height:100px;width:200px; border: solid 1px black; overflow:hidden ">
<div style="background-color:Red;margin-top: -5px;" mce_style="background-color:Red;margin-top: -5px;">
<a href="https://www.jb51.net/" mce_href="https://www.jb51.net/">脚本之家</a> </div>
</div>
回复

使用道具 举报

1

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2022-9-26 15:51:48 | 显示全部楼层
2222222222222222
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-12-31 10:28:45 | 显示全部楼层
看看看看
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-1-2 14:54:42 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2023-3-18 09:10:03 | 显示全部楼层
刷屏刷屏刷屏
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-7-1 05:55:56 | 显示全部楼层
下载来瞧瞧
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

376

积分

中级会员

Rank: 3Rank: 3

积分
376
发表于 2023-12-12 13:07:15 | 显示全部楼层
搞个免费的用用
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2024-2-21 02:36:48 | 显示全部楼层
呵呵呵呵呵呵
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-4-14 21:58:43 | 显示全部楼层
我要金豆金豆金豆
回复 支持 反对

使用道具 举报

11

主题

1万

回帖

103

积分

注册会员

Rank: 2

积分
103
发表于 2024-5-24 00:11:50 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 02:28 , Processed in 0.105446 second(s), 27 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表