IE is not displaying absolute positioned elements out of floated elements inside a relative positioned element [closed]
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
开发者_开发技巧Closed 10 years ago.
Improve this questionHere is the sample code to replicate the issue I'm facing while trying to position elements above their parents:
<html>
<body>
<style>
dl {
border: 1px solid red;
width: 200px;
padding-top: 40px;
margin: 0;
position: relative;
overflow: auto;
}
dt {
border: 1px solid blue;
margin: 0;
padding: 0;
width: 98px; float: left;
display: block;
}
dd {
border: 1px solid green;
margin: 0;
padding: 0;
height: 38px;
position: absolute;
top: 0px;
left: 0px;
width: 198px;
}
</style>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
I'm trying to structure dl elements and have dd displayed on top of everything and later will display different dd -s there by user selection with javascript and that is all easy.
Currenty in ie9 in quirks mode the elements are not displayed if elements are floated side by side. If they are not floated it works as expected. Does this have a meaningful explanation or a fix that will make the dd elements display above all other elements like in other browsers (tested chrome, ff, opera, safari) ?
this is solved and it is related to dimensions of subelements and dimensions of outer element and if they are fitting inside the parent or not. This is only happening in quirks mode
Your method is not quite right. Some modifications are needed.
http://jsfiddle.net/7Jjaj/
<ul>
<li>Coffee<span>- black hot drink</span></li>
<li>Milk<span>- white cold drink</span></li>
</ul>
* { margin: 0; padding: 0; }
ul {
overflow: hidden;
width: 300px;
padding: 40px;
list-style: none;
border: 1px solid red; }
ul li {
position: relative;
float: left;
width: 148px;
border: 1px solid blue; }
ul li span {
position: absolute; left: -1px; top: -40px;
display: block; width: 148px; height: 38px; line-height: 38px;
border: 1px solid green;
}
加载中,请稍侯......
精彩评论