Web前端定位

最新推荐文章于 2023-12-17 06:45:00 发布

山人甲

最新推荐文章于 2023-12-17 06:45:00 发布

阅读量437

点赞数

本文链接：https://blog.csdn.net/weixin_44252534/article/details/87922940

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山人甲</title>

    <style>

        /*定位 ： [position:静态定位 static  /  相对定位 relative / 固定定位  fixed  / 绝对定位 absolute]*/
       /* !*left: 10px  %   当前定位元素相对于参考物左边界的距离  x
        top:  10px %      当前定位元素相对于参考上边界的距离   y*!
        right
        bottom */


        div {
            width: 200px;
            height: 200px;
            color: #fff;
            font-size: 30px;
            line-height: 200px;
            text-align: center;

        }
        .static {
            /*定位参考物？  能不能动？ 不动   所有元素的默认属性
             当元素没有定位属性的时候默认就是静态定位  标准流

             */
            position: static;
            left:0px;
            top:0px;
            background-color: red;
        }
      /*  定位参考物？  能不能动？
       自己最初的位置做参考发生位置移动
       没有脱标  只是发生移动
       作用： 1：微调元素
              2：绝对定位
       */
        .relative {
            position: relative;
            left:0px;
            top:0px;
            background-color: purple;
        }
       /* 定位参考物？  能不能动？
       浏览器窗口左上角为参考
       能动  不保留原来位置 -》脱标

       滚动条滚动 固定定位元素位置不发生改变



       */
        .fixed {
            position: fixed;
            right:100px;
            top:0px;
            background-color: pink;
        }
        /* 定位参考物？

        不固定 元素  他会找离他最近的拥有定位（相对、决对）属性的元素作为参考


         能不能动？

       能动  不保留原来位置 -》脱标

       滚动条滚动 固定定位元素位置发生改变

       注意： 父亲没有定位的时候，子决父相
              父亲已经有了定位 ，无论哪种定位都不用在设置

       功能 ：覆盖 层次关系



       */
        .absolute {
            position: absolute;
            left: 30px;
            top:50px;
            background-color: #55a532;
        }
        .father {
            width: 600px;
            height: 600px;
            background-color: #666;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
<!--<div class="static">静态定位</div>
<div class="relative">相对定位</div>
<div class="fixed">固定定位</div>-->

<div class="father"  style="position: relative">
    <div class="absolute">绝对定位</div>
</div>



<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
<p>safdsgfdg</p>
</body>
</html>

Web前端 定位

Web前端定位