CSS positioning knowledge arrangement

Keywords: Attribute

Write By Monkeyfly

The following content is original. If you need to reprint, please indicate the source.

CSS positioning knowledge map

Note:

  • The picture is too long to view at its original scale. (can be saved to local view)
  • It is recommended to right-click the mouse and select "open in new tab", then press ctrl + (plus key) to enlarge to the appropriate size for picture preview. [PC end]
  • The shortcut key to restore the initial scaling of the page is Ctrl+0.

Difference between relative positioning and absolute positioning: (see the figure above)

Read the following code and effect illustration carefully to understand, understand to really remember. In addition, you have to do it yourself. On the basis of my own understanding, I will make a small demo to complete the difference between relative positioning and absolute positioning. Maybe I will find some new problems in the process. It's better to summarize after reading, otherwise it's useless to read more! In the end, it won't.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Relative positioning and absolute positioning</title>
    <style type="text/css">
        .div1{
            width: 500px;
            height: 300px;
            background-color: red;
        }
        .div2{
            position: relative;
            width: 300px;
            height: 150px;
            background-color: #10D610;
            top:-150px;
        }
        .div3{
            width: 300px;
            height: 100px;
            background-color: #999;
        }
        .div8{
            width:600px;
            height:400px;
            border:1px dashed #f40;
            position: relative;
            font-weight: 700;
        }
        .div4{
            width: 300px;
            height: 150px;
            background-color:gold;
            position: absolute;
            font-weight: normal;
        }
        .div5{
            width: 400px;
            height: 150px;
            background-color: skyblue;
            text-align: right;
            font-weight: normal;
        }
        .div6{
            width: 200px;
            height: 100px;
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: orange;
            font-weight: normal;
        }
        .div7{
            width: 200px;
            height: 100px;
            background-color: #f40;
            font-weight: normal;
        }
        p{
            width:730px;
            line-height: 1.5;
            background-color:pink;
            text-indent: 2em;
        }
        span{
            color:red;
            font-weight:700;
        }
    </style>
</head>
<body>
    <p>When relative positioning is set, it does not deviate from the standard document flow, and the original location will still be retained. Setting the offset property moves relative to its original position.</p>
    <div class="div1">div1[Standard document flow]</div>
    <div class="div2">div2 The original location of the set relative location [not separated from the standard document flow] is reserved and nobody dares to occupy it. (set here top=-height Offset attribute for;)</div>
    <div class="div3">div3[Standard document flow]</div>
    <p>Absolute positioning is relative to <span>Closest to oneself</span> also <span>Positioned ancestor element has been set</span> For positioning. This is relative to the parent element div8 Positioning.</p>
    <div class="div8">I am div8,yes div4,5,6,7 The parent element of. [standard document flow]
        <div class="div4">div4 Set the absolute location [off standard document flow], the original location will not be reserved, and will be div5 It's occupied. &nbsp;(Offset property not set here)</div>
        <div class="div5">div5 Covered</div>
        <div class="div6">I am div6,Absolute positioning and setting bottom:0;and right:0;</div>
        <div class="div7">I am div7[Standard document flow],Occupied div6 Location of</div>
    </div>
</body>
</html>

The rendering is as follows:

Posted by Nick~C on Sat, 02 May 2020 23:39:28 -0700