<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. 【mysql】mysql 常用建表语句

    [1]建立员工档案表要求字段:员工员工编号,员工姓名,性别,工资,email,入职时间,部门.[2]合理选择数据类型及字段修饰符,要求有NOT NULL,auto_increment, primary ...

  2. mysql的优化

    1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...

  3. Web Service和WCF的区别。其实二者不属于一个范畴!!!

    Web Service和WCF的区别 [1]Web Service:严格来说是行业标准,也就是Web Service 规范. 它有一套完成的规范体系标准,而且在持续不断的更新完善中. 它使用XML扩展 ...

  4. 什么是License

    许多混乱就始于你不知道License到底是什么,到底有什么含义.当你对你的产品使用License时,并不意味着你放弃了任何权利,你依然对其拥有原著作权.License只是授予他们于特定权利来使用你的产 ...

  5. ASP.MVC时间类型json数据处理

    服务端返回DateTime属性如果用自带的json方法返回的数据如下: 有2种办法解决一种是采用服务端解决方案,一种是使用前端解决方案 1.前端解决方案 第一步:对Date进行扩展 // 对Date的 ...

  6. 在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容

    问题: 在使用 vscode 以及 eslint 来检测 基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过 下载 ...

  7. TCP学习之五:客户端、服务端异步传输字符串

    参考学习张子阳大神的博客:http://www.cnblogs.com/JimmyZhang/category/101698.html 消息发送接口: 消息接收接口: 客户端: 服务端: 消息发送类: ...

  8. webservice 测试窗体只能用于来自本地计算机的请求

    Question: WebService部署成站点之后,如果在本地测试webservice可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求”或者"The test form is ...

  9. centos 7配置网络 更新yum源

    cd /etc/sysconfig/network-script/ 找到对应的ifcfg-entxxxx文件,然后添加网关,修改dhcp为static,静态ip,添加IPADDR ip地址.onboo ...

  10. JSON数据的使用

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...