アプリケーションシナリオ：場合によっては、アニメーション効果を実現するために、フローティングレイアウトをポジショニングレイアウトに変換する必要があります。
position属性を親に設定し、offsetTopとoffsetLeftを使用して位置を取得し、割り当てます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
width: 500px;
height: 500px;
background-color: black;
position: relative;
}
li {
float: left;
border: 1px solid black;
width: 100px;
height: 100px;
background-color: aqua;
/* text-decoration: none; */
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ali = document.getElementsByTagName("li");
var arr = [];
for (var i = 0; i < ali.length; i++) {
var obj = {
};
obj.left = ali[i].offsetLeft; //获取到的是最近的定位父级的距离位置
obj.top = ali[i].offsetTop;
arr.push(obj);
}
for (var i = 0; i < ali.length; i++) {
ali[i].style.position = "absolute";
ali[i].style.left = arr[i].left + "px";
ali[i].style.top = arr[i].top + "px";
}
</script>
</body>
</html>
