Question

以下示例代码用于复制我在尝试将元素放在父母上方时面临的问题：

<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>

我正在尝试构建dl元素并将dd显示在所有内容之上，之后将通过用户选择使用javascript显示不同的dd -s，这很容易。

在怪癖模式的ie9中，如果元素并排浮动，则不显示元素。如果它们没有浮动，它按预期工作。这是否有一个有意义的解释或修复，使dd元素显示在其他浏览器（测试的chrome，ff，opera，safari）之上的所有其他元素之上？

这已经解决，它与子元素的尺寸和外部元素的尺寸有关，以及它们是否适合父元素。这只发生在怪癖模式

Answer 1

你的方法不太对劲。需要进行一些修改。

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

IE不会在相对定位元素内的浮动元素中显示绝对定位元素

1 个答案: