Question

我是网络编程的完全初学者，所以这就是我的问题：

这就是我现在所拥有的： http://jsfiddle.net/H2V7W/5/

<div>
    <ul>
        <li>1</li>
    </ul>

    <ol>
        <li>a</li>
    </ol>
</div>


div{
    position: relative;
    border: 1px blue solid;
   }

ul, ol {
    border: 1px red solid;
       }

但是，只要我添加＆＃34;位置：绝对＆＃34;对于两个列表，div元素的高度减少到1px，这是我不想要的。 http://jsfiddle.net/H2V7W/6/

div{
    position: relative;
    border: 1px blue solid;
   }

ul, ol {
    border: 1px red solid;
    position: absolute;
       }

为什么会发生这两个列表似乎已完全跳出div？我以为我会完全控制＆＃34;一旦我在相对内部进行绝对定位？

Answer 1

根据spec，

<强>绝对
框的位置（以及可能的大小）使用“顶部”，“右侧”，“底部”和“左侧”属性指定。这些属性指定相对于包含框的偏移量。的绝对定位的盒子从正常流动中取出。这意味着他们对后来的兄弟姐妹的布局没有影响。尽管如此绝对定位的盒子有边缘，它们不会崩溃任何其他利润。

另见MDN article。

内部相对绝对定位？为什么这不起作用？

1 个答案: