CSS的四种定位的参照物

一、static定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .c1 {
            width: 100px;
            height: 100px;
            background: red;
            position: static;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

二、relative定位

相对定位元素的定位是相对其左上顶点的正常位置进行定位,定位后元素还会占据原来的空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .c1,.c2,.c3 {
            width: 100px;
            height: 100px;
        }

        .c1 {
            background: red;
            position: relative;
            left: 100px;
        }

        .c2 {
            background: green;
        }

        .c3 {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</body>
</html>

三、absolute定位

定位后,元素脱离文档流,不再占据原来的空间。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于<html>

1.父元素设置为relative定位,子元素设置absolute定位,相对其父元素进行定位。

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Document</title>
　　　　<style type="text/css">
　　　　　　* {
　　　　　　　　margin: 0;
　　　　　　　　padding: 0;
　　　　　　　}

　　　　　　.c1 {
　　　　　　　　width: 300px;
　　　　　　　　height: 300px;
　　　　　　　　background: red;
　　　　　　　}

　　　　　　.c2 {
　　　　　　　　width: 200px;
　　　　　　　　height: 200px;
　　　　　　　　background: green;
　　　　　　　　position: relative;
　　　　　　　}

　　　　　　.c3 {
　　　　　　　　width: 100px;
　　　　　　　　height: 100px;
　　　　　　　　background: blue;
　　　　　　　　position: absolute;
　　　　　　　　bottom: 0;
　　　　　　　　right: 0;
　　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div class="c1">
　　　　　　<div class="c2">
　　　　　　　　<div class="c3"></div>
　　　　　　</div>
　　　　</div>
　　</body>
</html>

2.祖先元素设置为relative定位,后代元素设置absolute定位,相对其祖先元素进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .c1 {
            width: 300px;
            height: 300px;
            background: red;
            position: relative;
        }

        .c2 {
            width: 200px;
            height: 200px;
            background: green;
        }

        .c3 {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">
            <div class="c3"></div>
        </div>
    </div>
</body>
</html>

3.元素没有已定位的祖先元素，它的位置相对于<html>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*这里不清除body的外边距,是为了能够区分html和body元素*/
　　　　 html,body {
　　　　　　　width:100%;
　　　　　　　height:100%;
　　　　　}

        html {
            border: 3px solid yellow;
        }

        body {
            border: 3px solid purple;
        }

        .c1 {
            width: 300px;
            height: 300px;
            background: red;
        }

        .c2 {
            width: 200px;
            height: 200px;
            background: green;
        }

        .c3 {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">
            <div class="c3"></div>
        </div>
    </div>
</body>
</html>

四、fixed定位

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .c1 {
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
　　<!--这里用br元素产生滚动条-->
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

CSS的四种定位的参照物

推荐阅读