IE is not displaying absolute positioned elements out of floated elements inside a relative positioned element [closed]_问答_开发者

IE is not displaying absolute positioned elements out of floated elements inside a relative positioned element [closed]

开发者 https://www.devze.com 2023-04-03 22:43 出处：网络

Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed. This question is off-topic. It is not currently accepting answers.

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

开发者_开发技巧

Closed 10 years ago.

Improve this question

Here 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;
}