Home >Web Front-end >HTML Tutorial >After the parent element is relatively positioned, the child element is overwritten in IE! _html/css_WEB-ITnose
After the parent element is relatively positioned, the child element is overwritten in IE! _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:34:071291browse
<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> The above HTML defines a relative positioning of the parent class and absolute positioning of the child elements.
在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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn