<div id="append_parent" style="position: relative;">
<div id="zoomimglayer" style="position: absolute; padding: 0px; left: 551.5px; top: 142px;
width: 800px; height: 439px; cursor: pointer;" class="popupmenu_popup">
<img id="zoomimg" style="cursor: move; margin: 5px; z-index: 1000; position: absolute;"
src="http://www.orico.com.cn/images/2013925141939458.jpg" width="800" height="543">
</div>
<div id="zoomimglayer2" style="position: absolute; padding: 0px; left: 551.5px; top: 142px;
width: 800px; height: 439px; cursor: pointer;" class="popupmenu_popup">
<div id="dprev" title="上一张" style="position: absolute; left: 0; top: 20px; z-index: 1001;
cursor: pointer; width: 40%; height: 523px;" onclick="alert('上一张')">
<a style="top: 271.5px; position: absolute;" class="prev">上一张</a>
</div>
<!-- .main -->
<div id="dnext" title="下一张" style="position: absolute; right: 0; top: 20px; z-index: 1001;
cursor: pointer; width: 40%; height: 523px;" onclick="alert('下一张')">
<a style="position: absolute; top: 271.5px; right: 0;" class="next">下一张</a>
</div>
</div>
</div>

以上HTML定义一个父类相对定位,子元素绝对定位。

在ie下,元素zoomimglayer2 被 元素zoomimglayer 覆盖了。



而在子元素zoomimglayer2上设置background样式才管用。求前端高手指点一下啊! 

<div id="append_parent" style="position: relative;">
<div id="zoomimglayer" style="position: absolute; padding: 0px; left: 551.5px; top: 142px;
width: 800px; height: 439px; cursor: pointer;" class="popupmenu_popup">
<img id="zoomimg" style="cursor: move; margin: 5px; z-index: 1000; position: absolute;"
src="http://www.orico.com.cn/images/2013925141939458.jpg" width="800" height="543">
</div>
<div id="zoomimglayer2" style="position: absolute; padding: 0px; left: 551.5px; top: 142px;
width: 800px; height: 439px; cursor: pointer;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);" class="popupmenu_popup">
<div id="dprev" title="上一张" style="position: absolute; left: 0; top: 20px; z-index: 1001;
cursor: pointer; width: 40%; height: 523px;" onclick="alert('上一张')">
<a style="top: 271.5px; position: absolute;" class="prev">上一张</a>
</div>
<!-- .main -->
<div id="dnext" title="下一张" style="position: absolute; right: 0; top: 20px; z-index: 1001;
cursor: pointer; width: 40%; height: 523px;" onclick="alert('下一张')">
<a style="position: absolute; top: 271.5px; right: 0;" class="next">下一张</a>
</div>
</div>
</div>
 

父元素相对定位后,子元素在ie下被覆盖的问题!的更多相关文章

  1. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  2. angular 中父元素ng-repeat后子元素ng-click失效

    在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...

  3. 父元素设置min-height子元素设置100%问题

    问题:父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%: 只有当父级元素满足min-height:1000px;设置的条件才触发: 浏览 ...

  4. AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  5. CSS实现父元素半透明,子元素不透明

    CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...

  6. CSS父元素高度随子元素高度变化而变化

    <html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...

  7. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  8. 当fixed元素相互嵌套时,父元素会影响子元素的层叠关系,最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  9. 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

随机推荐

  1. R for循环之break,next

    next跳出本次循环 break跳出本层循环(当有多个for 循环时,即跳出最近的一个for循环)

  2. Python Day12

    MySQL 数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库, 每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 我们 ...

  3. 创建Mat对象的几种方法

    1.Mat的构造函数 Mat M(行数,列数,数据类型,通道数) eg:M(2,2, CV_8UC3, Scalar(0,0,255)). 2.利用Mat的Create()函数.Mat M; M.cr ...

  4. canvas.drawBitmap()频繁调用导致应用崩溃问题

    因为opengl不熟,要在opengl上面贴文字  时间紧所以用到一个折中的办法  文字转bitmap 因为文字较多,对话形式  还要分行,分段,逻辑处理的比较复杂     运行中会有闪退发生,且不可 ...

  5. 记一次WinForm程序中主进程打开子进程并传递参数的操作过程(进程间传递参数)

    目标:想在WinForm程序之间传递参数.以便子进程作出相应的处理. 一种错误的方法 父进程的主程序: ProcessStartInfo psi = new ProcessStartInfo(); p ...

  6. [Unreal]学习笔记之灯光说明

    利用灯光通道,实现局部照亮效果 没有更改Channel之前的效果: 需要将网格物体设置为可移动 将灯光和被照亮物体的Channel设置为同样并且非0零: 设置成功后,就可以实现局部照亮

  7. webpack踩坑之路——图片的路径与打包

    转自:http://www.cnblogs.com/ghost-xyx/p/5812902.html 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不 ...

  8. 决策树及R语言实现

    决策树是什么 决策树是基于树结构来进行决策,这恰是人类在面临决策问题时一种很自然的处理机制.例如,我们要对"这是好瓜吗?"这样的问题进行决策时,通常会进行一系列的判断或" ...

  9. Android中Context的理解及使用(二)——Application的用途和生命周期

    实现数据共享功能: 多个Activity里面,可以使用Application来实现数据的共享,因为对于同一个应用程序来说,Application是唯一的. 1.实现全局共享的数据App.java继承自 ...

  10. ACM交流赛感悟

    A题很水,字符串匹配,提交好几次都没通过,后来老何提醒后,发现题意理解错了,改过来之后,还是没过----------------在敲代码之前,一定要三个人统一一下思路,思路一样的话,开敲: F题是简单 ...