[英]Why does the pink box not overlap in IE6?
It does it for every other browser ( I think ). 它会为其他所有浏览器执行此操作(我认为)。
http://www.webdevout.net/test?01H&raw http://www.webdevout.net/test?01H&raw
Code: 码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
* { overflow: visible; }
#precedence { float: right; height: 60px; width: 50px; background: pink; margin-bottom: -10px; margin-right: 20px; overflow: visible; }
#first { height: 50px; border: 1px dashed blue; background: white; margin-bottom: -10px; z-index: 100; position: relative; overflow: visible; }
#second { height: 50px; border: 1px dashed red; background: white; z-index: -1; overflow: visible; }
</style>
</head>
<body>
<div id="first">
<div id="precedence"></div>
</div>
<div id="second"></div>
</body>
</html>
Add position: relative;
添加
position: relative;
to the box ( #precedence
). 到框(
#precedence
)。 This will force IE to put it in the layering calculations it does. 这将迫使IE将其放入它所做的分层计算中。 It will then realize that it is not contained inside it's parent (
#first
) and will overflow properly. 然后,它将意识到它不包含在其父对象(
#first
)中,并且将正确溢出。
This is the tested example: http://jsfiddle.net/s4W52/ 这是经过测试的示例: http : //jsfiddle.net/s4W52/
It works in IE6, IE7, IE8, Firefox 2.0.x/3.0.x, so it should work in others too 它可以在IE6,IE7,IE8,Firefox 2.0.x / 3.0.x中运行,因此也应该在其他版本中运行
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.