文档流(float)转绝对定位

来源：互联网发布：沙县小吃知乎编辑：程序博客网时间：2024/05/17 00:05
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>文档流(float)转绝对定位</title>    <style type="text/css">        * {margin: 0;padding: 0}        ul {list-style: none;position: absolute;left: 0;top: 0}        ul li {width: 100px;height: 100px;float: left;border: 1px solid #000;margin: 0 5px}        div {width:102px;height: 102px;background: rgba(0,0,0,0.1);color: #fff;font-size:45px;position:absolute;left: 5px;top: 0}    </style></head><body>    <div id="active">hello word</div>    <ul id="box">        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul><script type="text/javascript">    var oBox=document.getElementById('box');    var aLi=oBox.getElementsByTagName('li');    var oAc=document.getElementById('active');    //1、新建数组存li的位置    var arr=[];    for (var i = 0; i < aLi.length; i++) {        arr[i]={left:aLi[i].offsetLeft,top:aLi[i].offsetTop}    };    //2.在开一个循环，用以设定left、top值    for (var i = 0; i < aLi.length; i++) {        aLi[i].style.left=arr[i].left+'px';        aLi[i].style.top=arr[i].top+'px';        aLi[i].style.position="absolute";        //margin之前的作用是为li之间留出间隔，现在它的使命完成了，被li绝对定位取代了，就不在需要；        //并且如果不设置为0；会有小问题。第一个li的margin-left本应该是5，但是实际却是10；        //你可以不加下面的试试看。解决办法就是aLi[i].style.margin='0';        aLi[i].style.margin='0';        aLi[i].onmouseover=function(){            oAc.style.left=this.offsetLeft+'px';            oAc.style.top=this.offsetTop+'px';        }    };</script></body></html>
0 0