专业网站建设_企业品牌营销 · 北京汇仁智杰科技有限公司

Web前端知識(shí)

首頁 > 免費(fèi) > Web前端知識(shí) >

z-index無效的幾種情況

來源:北京匯仁智杰科技有限公司   時(shí)間:2016-11-15   點(diǎn)擊:

在CSS中,只能通過代碼改變層級(jí),這個(gè)屬性就是z-index,要讓z-index起作用有個(gè)小小前提,就是元素的position屬性要是relative,absolute或是fixed。

第一種情況(z-index無論設(shè)置多高都不起作用情況):

這種情況發(fā)生的條件有三個(gè):

1、父標(biāo)簽 position屬性為relative;

2、問題標(biāo)簽無position屬性(不包括static);

3、問題標(biāo)簽含有浮動(dòng)(float)屬性。

eg:z-index層級(jí)不起作用,浮動(dòng)會(huì)讓z-index失效,代碼如下:

<DIV style=”POSITION: relative; Z-INDEX: 9999″>

<IMG style=”FLOAT: left” src=img/131101/1A5494I0-0.jpg”>

</DIV>

解決辦法有三個(gè)(任一即可):

1、position:relative改為position:absolute;

2、浮動(dòng)元素添加position屬性(如relative,absolute等);

3、去除浮動(dòng)。

第二種情況

IE6下,層級(jí)的表現(xiàn)有時(shí)候不是看子標(biāo)簽的z-index多高,而要看整個(gè)DOM tree(節(jié)點(diǎn)樹)的第一個(gè)relative屬性的父標(biāo)簽的層級(jí)。

eg:IE7與IE6有著同樣的bug,原因很簡(jiǎn)單,雖然圖片所在div當(dāng)前的老爸層級(jí)很高(1000),但是由于老爸的老爸不頂用,可憐了9999如此強(qiáng)勢(shì)的孩子沒有出頭之日啊!,代碼如下:

<DIV style=”POSITION: relative”>

<DIV style=”POSITION: relative; Z-INDEX: 1000″>

<DIV style=”POSITION: absolute; Z-INDEX: 9999″> <IMG src=”img/1A3194V7-1.jpg”>

</DIV>

</DIV>

</DIV>

解決辦法: 在第一個(gè)relative屬性加上一個(gè)更高的層級(jí)(z-index:1),代碼如下:

<DIV style=”POSITION: relative; Z-INDEX: 1″>

<DIV style=”POSITION: relative; Z-INDEX: 1000″>

<DIV style=”POSITION: absolute; Z-INDEX: 9999″> <IMG src=”img/1A3194V7-1.jpg”>

</DIV>

</DIV>

</DIV>

網(wǎng)絡(luò)營(yíng)銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:13370157521
業(yè)務(wù)QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號(hào)-1

匯仁智杰與眾不同

  • 有網(wǎng)絡(luò)推廣經(jīng)驗(yàn)
  • 有網(wǎng)站建站隊(duì)伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗(yàn)
  • 致力于營(yíng)銷型網(wǎng)站建設(shè)
  • 始終堅(jiān)持技術(shù)和服務(wù)同樣重要
查看PC版網(wǎng)站
備案號(hào):京ICP備15021091號(hào)-1 版權(quán)所有:匯仁智杰

主站蜘蛛池模板: 松下PLC经销商-松下传感器-放大器-电磁阀-光电开关-金器[东莞均钛]品牌气动元件及工控产品一站式供应商 | 山东亮化工程_亮化公司_亮化资质-山东星汇照明工程有限公司 | 中科先农农业(河北)智能设备有限责任公司 | 苏子富春品牌馆 抚顺市富春农业科技开发有限公司 抚顺特色农产品 抚顺市特色馆 | 指纹锁_智能锁_指纹密码锁_智能锁十大品牌_智能门锁厂家-深圳市豪力士智能科技有限公司 | 竖豆网-网站建设、小程序商城、软件定制开发 | 无人叉车|智能无人叉车|智能AGV叉车|激光叉车AGV厂家_江西丹巴赫机器人股份有限公司 | 西安logo设计公司/西安包装设计公司/西安画册设计公司/西安广告公司/西安品牌设计公司/泰勒广告 雾度计-雾度仪-透光率测试仪-3nh品牌雾度仪生产厂家 | 郑州长城冶金设备有限公司 | 卡压式管件_不锈钢卡压式管件_双卡压管件_不锈钢沟槽管件_承插焊管件_温州市中达阀门管件有限公司 | 萍乡赣西肿瘤医院|萍乡赣西肿瘤医院--官网-萍乡赣西肿瘤医院 | 无石棉纤维增强水泥板厂家_水泥纤维装饰板_河北埃尔佳建材科技有限公司 | 威学一百-专注国际学校择校备考-DSE-A-level-雅思-托福-OSSD-港澳台联考-AP-IGCSE-IB-AMC-多邻国-PTE-SAT-SSAT-小语种(如日语,韩语,德语,法语,西班牙语,意大利语,俄语,泰语)等考试培训,为出国留学学生提供个性化定制性学习方案,线下实体面授+线上网络课程, 提供一对一,小班课等多种班型 | 鑫金牛建设工程(苏州)有限公司| 耐磨焊条_高硬度堆焊焊条_碳化钨合金耐磨焊丝_北京耐默 | 前海卡的物联智能技术(深圳)有限公司 | 在线播放国产精品|哔咔漫画破解版永久vip兑换码|免费黄漫画|女被黄漫扒衣服软件|91精品麻豆 | 液压尾管悬挂器,机械式尾管悬挂器价格,石油套管扶正器厂家,连续油管悬挂器,高压双塞水泥头,免钻塞注水泥分级箍,单塞套管水泥头价格,弹性套管扶正器,铸铝钢性扶正器,钢性套管扶正器厂家 | 圆柱模板_圆柱木模板_方柱加固件_建材板材网| 钎头_球齿钎头_一字钎头 - 铜陵狮达矿山机械有限公司 | 天木生物科技有限公司-高通量自动化-细胞筛选平台 | 危废处理_危废处置_危废处理公司-江苏绿瑞特环境科技股份有限公司 | 昆明护栏网厂家_隔离栅_围栏网_石笼网「13年生产经验」-云南北辛商贸 | 桥梁伸缩缝_桥梁伸缩缝厂家_桥梁伸缩缝价格-衡水淞皓路桥养护工程有限公司 | 石家庄装修设计_别墅装修装饰公司-金舍装饰官网 | 宁波公司注册_宁波注册公司_宁波代理记账_宁波做内账|安隆会计专业服务机构 | 皮带输送机-宁津县浩发链条有限公司| 中华石油化工网 www.cnpec.net——歌颂石化 服务石化 奉献石化 发展石化 | 中国焊接协会网站—中国焊接信息网;焊接行业最权威访问量最大的专业网站:焊接信息、焊接材料,焊接机器,焊接设备,焊机,焊材,辅助设备,焊机配件,仪器仪表,电动工具,钎焊,送丝机,表面处理,自动化专机,焊锡丝,助焊剂 | 清洁公司| 保洁公司| 东莞清洁| 东莞保洁|壹壹清洁 | 长沙变频器维修,变频器维修,ABB变频器维修,西门子变频器维修,施耐德变频器维修,伺服驱动器维修,工业机器人维修,20年专业工控电气维修,长沙文铖电气设备有限公司_长沙文铖电气设备有限公司 | 厦门海为科技有限公司 - 工业物联网|国产PLC|HMI|SCADA | 全玻璃视镜人孔-卡箍组件-常压单臂梁人孔-温州华强流体设备有限公司 | 硬度计-布氏硬度计-维氏硬度计-莱洛特试验仪器有限公司 | 深圳PCB电路板厂|PCB线路板厂|FPC柔性电路板厂|FPC软性线路板生产厂家|恒成和电路板:18681495413 | 注塑加工,无锡塑料件加工,注塑模具加工厂家-无锡富立康精密模塑有限公司 | 石墨热场|PECVD石墨舟|碳碳框|燃料电池双极板|半导体石墨|光纤用石墨模具|石墨电极加工|石墨制品|上海弘竣新能源材料有限公司 | 廊坊金星化工有限公司-钢套钢保温管厂家,玻璃钢缠绕保温管,镀锌铁皮保温管厂家,廊坊金星化工有限公司 | 清河县隆鑫密封件有限公司,汽车用密封条,配电箱柜、集装箱密封胶条,建筑门窗、家具用密封条,无毒环保医用密封条,船舶、农机用密封条,异型产品 | 九洲集团官网(300040)—哈尔滨九洲集团股份有限公司 | 济南时代,济南时代试验机,试金老品牌-济南时代试验机技术有限公司 |