文档流的转换

九宫格布局案例

文档流的转换：相对定位=>绝对定位

1.正常情况下，当鼠标移动到某一块时，某一块变大。所以布局的时候相对定位，实际放大的时候是绝对定位

单独给某一块设置放大样式时遇到了问题，放大的块把之后的块挤下去了。

所以我们要进行文档流的转换，相对定位=>绝对定位

#ul1 li
{
    list-style: none;width: 100px;height: 100px;border: 1px solid black;
    margin: 10px;float: left;background-color: gray;
}
#ul1
{
    width: 366px; height: 366px; border: 1px solid black;margin: 100px auto;
    position: relative;
}

<ul id="ul1">
    <li></li>
    <li style="width: 200px;height: 200px;"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

2.进行文档流转换，这里切记，一个遍历不能同时设置坐标和absolute，

错误示范：同一个遍历设置坐标和absolute

for(var i=0; i<aLis.length; i++)
{
    aLis[i].style.left=aLis[i].offsetLeft + "px";
    aLis[i].style.top=aLis[i].offsetTop + "px";
    aLis[i].style.position="absolute";
}

原因是当第一个块设置成absolute时，就脱离层级了，后边块就跟上往前顶，最后重合到一起，

所以分开写两个遍历分别设置坐标和absolute。

var oUl1=document.getElementById("ul1");
var aLis=oUl1.getElementsByClassName("li");
for(var i=0; i<aLis.length; i++)
{
    aLis[i].style.left=aLis[i].offsetLeft + "px";
    aLis[i].style.top=aLis[i].offsetTop + "px";
}
for(var i=0; i<aLis.length; i++)
{
    aLis[i].style.position="absolute";
}

3.这时也有一个问题小问题。我们在之前的相对定位盒模型中#ul1 li中设置了margin:10px；所有块会保持间距向右下角偏移。我们设置了绝对定位之后就没有必要保持实时间隔。

#ul1 li
{
    list-style: none;width: 100px;height: 100px;border: 1px solid black;
    margin: 10px;float: left;background-color: gray;
}

所以在设置绝对定位的同时，也将margin设置成0。最后文档流转换：相对定位=>绝对定位 大功告成

var oUl1=document.getElementById("ul1");
var aLis  =oUl1.getElementsByTagName("li");
for(var i=0; i<aLis.length; i++)
{
    aLis[i].style.left=aLis[i].offsetLeft + "px";
    aLis[i].style.top=aLis[i].offsetTop + "px";
				
}
for(var i=0; i<aLis.length; i++)
{
    aLis[i].style.position="absolute";
    aLis[i].style.margin="0px";
}