Relative positioning

The location element deviates from the normal document flow but occupies the position of the normal document flow.

(1) The relative element does not add position, and its position is in the virtual box position.

(2) “relative” element adds position: “relative”. Relative to its own position, the root top/bottom/left/right is positioned based on the upper left outer corner of the virtual box (its original position) margin.

(3) The relative element in the dotted box occupies the position of the normal document flow, so the normal element goes below.

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #sub1 {
            height: 100px;
            width: 100px;
            position: relative;
            top: 100px;
            left: 100px;
            background-color: red;
        }

        #sub2 {
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>

<body style="border:1px black solid">
    <div id="sub1">Relative elements</div>
    <div id="sub2">Normal elements</div>
</body>
Copy the code

Absolute absolute positioning

Moves the location element away from the normal document flow without occupying the position of the normal document flow. As shown below:

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #sub1 {
            height: 100px;
            width: 100px;
            position: absolute;
            /* margin: 10px; border: 10px; padding: 10px; * /
            top: 100px;
            left: 100px;
            background-color: red;
        }

        #sub2 {
            height: 100px;
            width: 100px;
            /* position: relative; top: 100px; left: 100px; * /
            background-color: green;
        }

    </style>
<body style="border:1px black solid">
    <div id="sub1">Absolute elements</div>
    <div id="sub2">Normal elements</div>
</body>
Copy the code
  • absoluteElements of theNo parent elementpositionPositioning,absoluteElement relative tobodypositioning
<style>
        * {
            padding: 0;
            margin: 0;
        }

        #parent {
            height: 100px;
            width: 100px;
            background-color: yellow;
            /* position: absolute; */
            margin: 100px;
            padding: 100px;
        }

        #child {
            height: 100px;
            width: 100px;
            position: absolute;
            /* margin: 10px;
            border: 10px;
            padding: 10px; */
            top: 100px;
            left: 100px;
            background-color: red;
        }
    </style>
<body style="border:1px black solid">
    <div id="parent"> parent element <div id="child"Absolute </div> </div> </body>Copy the code
  • absoluteElements of theThe parent element ispositionPositioning (absoluteorrelative),absoluteElement relative toThe parent elementthepaddingPosition the upper left outer corner

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #parent {
            height: 100px;
            width: 100px;
            background-color: yellow;
            position: absolute;
            margin: 100px;
            padding: 100px;
        }

        #child {
            height: 100px;
            width: 100px;
            position: absolute;/*或者positi:relative*/
            /* margin: 10px;
            border: 10px;
            padding: 10px; */
            top: 100px;
            left: 100px;
            background-color: red;
        }
    </style>
<body style="border:1px black solid">
    <div id="parent"> parent element <div id="child"Absolute </div> </div> </body>Copy the code

Fixed Fixed position

Out of the document flow, out of the normal document flow, positioned relative to the body