CSS定位详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Growing_hacker/article/details/103788149

固定定位:始终相对于浏览器窗口进行定位

用途：loading加载页面，等待网络加载

<html>
<head>
    <title>定位方式-固定定位</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            height: 2000px;
        }
        div{
            display：none;
            position: fixed;/*设置定位方式为固定定位*/
            bottom:0;
            top:0;
            left:0;
            right:0;
        }

    </style>
</head>
<body>
    <div>这是一个div盒子</div><br>
</body>
</html>

相对定位:参照的是标签原来的位置,原来的位置保留

用途：子绝父相，防止子脱离文档流

<html>
<head>
    <title>定位方式-相对定位</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            height: 2000px;
        }
        #span2{
            position: relative;/*设置定位方式为相对定位*/
            top: 20px;
            left: 14px;
        }
    </style>
</head>
<body>
    <span id="span1">这是一个</span>
    <span id="span2">这是一个</span>
    <span id="span3">这是一个</span>
</body>
</html>

绝对定位:元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块----body

用途：脱离文档

<head>
    <title>定位方式-绝对定位</title>
    <meta charset="utf-8">
    <style type="text/css">
        div{
            width: 500px;
            height: 400px;
            position: relative;
        }
        .zi {
            width: 50px;
            height: 40px;
            background-color: yellow;
            position: absolute;/*设置定位方式为绝对定位*/
            right: 0px;
            bottom: 0px;
        }

    </style>
</head>
<body>
    <div>
        <div class="zi"></div>
    </div>
</body>

css中三种定位详细介绍