zoukankan      html  css  js  c++  java
  • 被遮挡的绝对定位

    <div class=”A” style=”position:relative;”>A (relative)
     <div class=”logo” style=”position:absolute;z-index:99999;“></div>
    </div>
    <div class=”B” style=”position:relative;”>B (relative)</div>

    最近做minisite项目时,碰到了个奇怪的定位问题: 以上的A,B两个盒子是相对定位,
    标牌logo是A的子级,基于A做绝对定位
    问题描述:我们希望标牌logo显示在最上面,但在IE下logo标牌部分被B区域遮住,B在最上层显示,调整logo的z-index的数值调整无效,firefox下显示正常。

    解决方案:先了解一下所涉及到的几个定位特性(非官方解释):
    1. 相对定位元素默认的z-index的数值是0。
    2. 当两个相对定位同时出现时,代码靠后的z-index优先。
    3. 子级遵循父级设定的z-index;如果子级设定了绝对定位、z-index,可以冲破父级显示
    这个问题主要是ie对上面第3条错误解释导致的—在ie下子级的z-index不能冲破父级。网上解决这个bug的办法一般用hack使B为负值,来降低 B 在IE下级别,这种方法绕了一个大圈:z-index为负值时,产生了新的ie bug。

    按照定位的特性,ie的这个bug是可以回避的,从表面上看 B 遮住了logo,实际上是 B 遮住了logo的父级 A ,只要将 A 的z-index设定大于B即可。

    <div class=”A” style=”position:relative;z-index:1;“>A (relative)
     <div class=”logo” style=”position:absolute;”></div>
    </div>
    <div class=”B” style=”position:relative;”>B (relative)</div>

  • 相关阅读:
    java注解说明
    paypal
    eclispe查看jdk源码后特别卡顿导致未响应解决
    ubuntu+tomcat,多环境、自动化部署脚本,git+maven+tomcat+ubuntu
    ubuntu+let's encrypt生成永久免费https证书 ubuntu+tomcat+nginx+let's encrypt
    MySQL创建数据库与创建用户以及授权
    linux查找并杀死进程shell
    redmine安装笔记
    C#动态获取本机可用串口的两种方式
    C# 控件缩写规范
  • 原文地址:https://www.cnblogs.com/zzh/p/1392441.html
Copyright © 2011-2022 走看看