css中position属性

最新推荐文章于 2022-06-03 15:29:23 发布

pzhchenlong

最新推荐文章于 2022-06-03 15:29:23 发布

阅读量251

点赞数

文章标签： css

本文链接：https://blog.csdn.net/pzhchenlong/article/details/72844096

版权

<html>
    <head>
        <meta charset="UTF-8">
        <title></title> 
        <style type="text/css">
            #result1{
                width:20px;
                height:20px;
                left:10px;
                top:10px;
                background-color:red;
                position:relative;

            }
            #result2{
                width:20px;
                height:20px;
                background-color:black;
            }
        </style>
    </head>

    <body>
        <script type="text/javascript"> 

        </script>
        <div id = "parent">
            <div id="result1"></div>
            <div id="result2"></div>
        </div>
    </body>
</html>

result1设置了reletive的话，他将会根据设置的top、left、
adding等进行偏移，而result2该在哪里就在那里。
不设置reletive的话left、top位置不动。
当result1设置了absolute的时候有两个情况
如果parent也设定了absolute或者relative时，它就是以parent进行定位，从parent的padding左上角开始定位，然后如果parent也设定了absolute或者relative时，它就是以parent进行定位，从parent的padding左上角开始定位，然后result2会在result1的位置上，result1其实就变得“浮”起来了。
如果他的父级没有设定absolute或者relative时，他就会以body进行定位

fix是以body为对象，按照浏览器窗口来进行定位的。

static 这个是默认值，正常排列。