Position indicates the specified bit type. The value can be static, relative, absolute, fixed, inherit, or sticky. Sticky is a newly released property of CSS3

A, the static

Static is the default value for position, which means that there is no position and the element is in the current normal document flow

Second, the relative

“Relative” refers to the position of an element relative to its original position. Elements are not removed from the flow of the document, so the original position of the element is retained, and the position of other elements is not affected

Case presentation

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
       * {
            margin: 0px;
            padding: 0px;
        }
        .container {
            width: 100%;
            height: 300px;
        }
        .content {
            width: 100px;
            height: 100px;
        }
        .content_yellow {
            background-color: yellow;

        }
        .content_red {
            background-color: red;
        }
        .content_black {
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content_yellow content"></div>
        <div class="content_red content"></div>
        <div class="content_black content"></div>
    </div>
</body>
</html>

Copy the code

Now set the red square to be positioned 50px to the right and 50px to the bottom relative to itself

.content_red {
    background-color: red;
    position: relative;
    left: 50px;
    top: 50px;
}
Copy the code

Third, absolute

Absolute is an absolute position. It refers to the position of the element’s first parent relative to the static position. There are two cases

  1. Element with absolute if there are parents with position as relative or absolute, the element is positioned with those parents
  2. If the position attribute is not set to relative or absolute parent, then the position is relative to the body

Absolute is a generated element of absolute position that is removed from the text flow, that is, no longer occupies a position in the document. It is often used in conjunction with relative

<div class="fu">
    <divClass ="son"> Child </div>
</div>
.fu {
        height: 500px;
        width: 500px;
        background-color: burlywood;
        position: relative;
 }
.son {
        height: 100px;
        width: 100px;
        background-color: red;
         position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
Copy the code

Fourth, the fixed

Fixed is a special kind of absolute position that also leaves the document stream, except that the fixed element is positioned relative to the body

Five, the sticky

Sticky refers to sticky positioning, which can be said to be a combination of relative positioning and fixed positioning. At the beginning, it is not out of the document flow. However, when the distance between an element and its parent reaches the requirement of sticky positioning, position:sticky is equivalent to fixed positioning, which is fixed to an appropriate position and separated from the document flow

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        /* Sticky positioning */
        /* Sticky positioning can be thought of as a mixture of relative positioning and fixed positioning. Elements are considered relative positioned until they span a specific value, and then fixed */* {padding: 0;
            margin: 0;
        }
        body{
            height: 2000px;
        }
        div{
            text-align: center;
            line-height: 40px;
        }
        .header{
            height: 40px;
            width: 100%;
            background-color: yellow;
            position: fixed;
            top: 0;
        }
        .banner{
            height: 80px;
            background-color: rosybrown;
            margin-top: 40px;
        }
        .nav{
            height: 40px;
            background-color: royalblue;
            position: sticky;
            top:40px;
        }
    </style>
</head>

<body>
    <div class="header">The head</div>
    <div class="banner">Banner area</div>
    <div class="nav">The navigation bar</div>
</body>

</html>
Copy the code

When you scroll down, the navigation bar will be fixed at 40px at the top

Six, inherit

Inherit is the position property of the parent element