1: position

• Static static

All tags are static by default static，Unable to change position
static The default value is no positioning. It cannot be used as a reference for absolute positioning, and the label object is set left,top Equivalence does not work.

1.relative

• Move relative to the original position of the label

Relative positioning is relative to the original position of the element in the document stream, that is, taking its original position as the reference. Interestingly, even if the relative positioning and offset value of the element are set, the element still occupies the original position, that is, occupies the document flow space. Object follows the normal document flow, but will be based on top，right，bottom，left And other properties are offset in the normal document flow. And its cascade through z-index Attribute definition.

be careful: position: relative One of the main uses of: it is convenient to absolutely locate elements and find references.

2.absolute (absolute positioning)

• Move relative to the positioned parent label (if there is no parent label, take the body as the reference)

• definition:

The element box set to absolute positioning is completely deleted from the document stream and positioned relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, its position is relative to the original containing block (i.e body Element). The space originally occupied by the element in the normal document flow is closed as if the element did not exist. After the element is located, a block level box is generated, regardless of the type of box it originally generated in the normal flow.

• a key

If the parent is set position Properties, such as position:relative;，Then the child element will be positioned with the upper left corner of the parent as the original point. This can well solve the label deviation problem of adaptive websites, that is, if the parent is adaptive, my child elements will be set position:absolute;Parent element settings position:relative;，then Top,Right,Bottom,Left Expressed as a percentage of width.

• In addition, the object is separated from the normal document flow, and the top, right, bottom, left and other attributes are used for absolute positioning. Its cascade is defined by the z-index attribute.
• object of reference:
  ![image](https://img20

3.fixed

• Fixed in a position relative to the browser window

fixed: Object out of the normal document flow, using top，right，bottom，left And other attributes are positioned with the window as the reference point. When the scroll bar appears, the object will not scroll with it. And its cascade through z-index Attribute definition. Note: if an element is set position:absolute | fixed; Then the element cannot be set float. This is a common sense knowledge point, because these are two different streams, one is floating stream and the other is "positioning stream". however relative But you can. Because its original space still occupies the document flow.

• In theory, the element set to fixed will be positioned at a specified coordinate of the browser window, and it will be fixed in this position whether the window scrolls or not.
• object of reference
  

2: Relative positioning

 Move relative to the original position of the label

1. Relative positioning

    <style>
        body {
            /*Fit to border*/
            margin: 0;
        }
        #d1 {
            /*height*/
            height: 100px;
            /*width*/
            width: 100px;
            /*background color */
            background-color: red;
        }
    </style>

2. Realize relative positioning

    <style>
        body {
            /*Fit to border*/
            margin: 0;
        }
        #d1 {
            /*height*/
            height: 100px;
            /*width*/
            width: 100px;
            /*background color */
            background-color: red;
            left: 50px;  /*From left to right, if it is negative, it is the opposite*/
            top: 50px;  /*From top to bottom, if it is negative, the direction is the opposite*/
            /*position: static;  !*The default is static. The location cannot be modified *!*/
            /*The relative positioning table changes from static to relative, and its nature changes from the label that has not been positioned to the label that has been positioned*/
            position: relative;
            /*Even if you don't move, the nature has changed*/
        }

3: Absolute positioning

Relative to the defined parent tag, I only give you a parent tag, and then you locate it according to this parent tag, absolutely

1. Achieve absolute positioning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*Fit to border*/
            margin: 0;
        }
        #d2 {
            /*height*/
            height: 100px;
            /*width*/
            width: 200px;
            /*background color */
            background-color: red;
            /*Labels already positioned*/
            position: relative;
        }
        #d3 {
            /*height*/
            height: 200px;
            /*width*/
            width: 400px;
            /*background color */
            background-color: yellowgreen;
            /*Absolute positioning*/
            position: absolute;
            /*Move from left to right*/
            left: 200px;
            /*From top to bottom*/
            top: 100px;
        }
    </style>
</head>
<body>
<div id="d2">
    <div id="d3"></div>
</div>
</body>
</html>

4: Fixed positioning

• Fixed somewhere in the browser

1. Achieve fixed positioning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*Fit to border*/
            margin: 0;
        }
        #d2 {
            /*height*/
            height: 100px;
            /*width*/
            width: 200px;
            /*background color */
            background-color: red;
            /*Labels already positioned*/
            position: relative;
        }
        #d3 {
            /*height*/
            height: 200px;
            /*width*/
            width: 400px;
            /*background color */
            background-color: yellowgreen;
            /*Absolute positioning*/
            position: absolute;
            /*Move from left to right*/
            left: 200px;
            /*From top to bottom*/
            top: 100px;
        }
        #d4 {
            /*After fixed is written, the positioning is a browser window*/
            position: fixed;
            /*Distance from browser bottom*/
            bottom: 10px;
            /*Distance from browser right*/
            right: 20px;
            /*height*/
            height: 50px;
            /*width*/
            width: 100px;
            /*background color */
            background-color: white;
            /*Top, bottom, left and right borders*/
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">Back to the top</div>
</body>
</html>

• (text content is preferred) instructions:

xxxxxxxxxx The browser gives priority to displaying text content. If it finds that the text content is blocked, it will try its best to find a place to display it

5: Verify that floating and positioning are out of the document flow (verify that the original location is retained)

1. What is off document flow?

The original position is gone and can be replaced

2. Verification object (method capable of changing label position)

float
 Relative positioning
 Absolute positioning
 Fixed positioning

3. (not separated from document flow)

• Relative positioning

4. Break away from document flow

• 1. Floating
• 2. Determine positioning
• 3. Fixed positioning

5. Test relative positioning

<body>                                                      /*Relative movement 500 to the right*/
<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow"></div>
</body>

6. Test absolute positioning

<body>                                                 
<div style="height: 100px;width: 200px;background-color: red;position: absolute;left: 500px;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow"></div>
</body>

7. Test fixed positioning

<body>                                                      
<div style="height: 100px;width: 200px;background-color: red;position: fixed;left: 500px;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow"></div>
</body>

6: Modal box case of z-index

1. What is a modal box?

• Baidu login page is actually a three-tier structure

	1.At the bottom is normal content(z=0)  Farthest layer
	2.Black transparent area(z=99)	Middle layer
	3.White registration area(z=100)  Closest to user

2.z-index mode box

#d1 {
  z-index: 99;
}

3. Set the stacking order of objects

• 1. The z-index value indicates who is pressing who. The large value covers the small value,
• 1. Only positioned elements can have z-index, that is, z-index can be used regardless of relative positioning, absolute positioning and fixed positioning, while floating elements cannot use z-index
• 1. The z-index value has no unit, but is a positive integer. The default z-index value is 0. If everyone has no z-index value, or the z-index value is the same, who writes behind the HTML, who presses others on it, locates the element, and always suppresses the element without positioning.
• 1. From the father phenomenon: when the father counsels, the son is useless

4. Simple z-index modal box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .cover {
            /*Fixed positioning*/
            position: fixed;
            /*0 up, down, left and right*/
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            /*background color */
            background-color: rgba(0,0,0,0.4);
            /*Modal box*/
            z-index: 99;
        }
        .modal {
            /*background color */
            background-color: white;
            height: 200px;
            width: 400px;
            /*Fixed positioning*/
            position: fixed;
            /*50% from left to right*/
            left: 50%;
            /*50% from top to bottom*/
            top: 50%;
            /*Modal box*/
            z-index: 100;
            /*Move from right to left*/
            margin-left: -200px;
            /*Move from bottom to top*/
            margin-top: -100px;


        }
    </style>
</head>
<body>
<div>This is the bottom page content</div>
<div class="cover"></div>
<div class="modal">
    <h1>Baidu login</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>Point me</button>
</div>
</body>
</html>

7: Transparency

1.opacity effect

transparency opacity It can not only change the transparency of color, but also change the transparency of font

• rgba : Only color can be affected
• opacity: you can modify the color and font