大家帮我解释解释这个效果为什么!

[wj539h]

下面的代码为什么big这个层变成了一个长条,container为什么不在里面呢!
当我把big的position:relative;删除之后就好了,能帮我解释接是吗?我对position:relative和position:absolute不是很明白

<style>
#big
{
top:200px;
left:200px;
position:relative;
border:1px solid #000000;
overflow:hidden;
background-color:#550000;
}
#container
{
position:absolute;
top:100px;
left:100px;
width:500px;
height:500px;
background-color:#000000;
}
#box
{
position:absolute;
top:75px;
left:75px;
width:50px;
height:50px;
background-color:#FFFFFF;
z-index:inherit;
}

#box1
{
position:absolute;
top:100px;
left:100px;
width:50px;
height:50px;
background-color:#FF0000;
}
</style>

<div id="big">
<div id="container">
<div id="box"></div>
<div id="box1"></div>
</div>
</div>

[yixianggao]

手册里都有！

DHTML参考手册
http://download.csdn.net/source/308913

[西安风影]

我对position:relative和position:absolute
要搞清楚这两个概念不是很容易，它根据前后元素和父级
得高度，宽度，是否指定了top，left
以及是否有position属性，还有流式排列规则，以及是否inline
block，总之挺麻烦。

relative是相对上一个元素得，并且元素占位

absolute是相对父级元素，但父级元素必须有position属性，否则就相对浏览器
窗口左上角，并且元素不占位

占位不占位比较关键，通常absolute用于浮动层

[西安风影]

你给big加上高度宽度可以看看效果
去掉position:relative;那么top:200px;
left:200px;将失效，按流式排列

#big
{
top:200px;
left:200px;
position:relative;
top:200px;
left:200px;
border:1px solid #000000;
overflow:hidden;
width:500px;
height:500px;
background-color:#FF0000;
}