文档流(float)转绝对定位

最新推荐文章于 2022-06-08 19:13:05 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2022-06-08 19:13:05 发布

阅读量318

点赞数

分类专栏： JavaScript积跬步至千里文章标签： javascript float 定位

本文链接：https://blog.csdn.net/wstpa/article/details/44944343

版权

JavaScript积跬步至千里专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
文档流(float)转绝对定位

<!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:
复制链接

扫一扫

专栏目录