2020-1-22 css positioning notes

One, css positioning basic notes

1.position: (posit release, placement + ion table noun → released [position] = position)
static (default) (stat stand, stand + ic… → stand still → static)
relative (adj.relative ) Relatives)
absolute
fixed (fix)
sticky (sticky)
z-index (measurement)

2.relative:
If the positioning offset is not set, it will have no effect on itself. The
element will not be separated from the document flow. It will
not affect the layout of other elements. The
left, top, right, and bottom are offset relative to the'self'

3. Absolute:
Make the element completely out of the document flow.
Make the inline element support the width and height (let the inline have the fast nature)
make the width and height of the fast element be determined by the content (let the fast determine the nature of the inline)
if the ancestor element has positioning, Relative displacement relative to ancestor elements, relative text displacement if none

4.fixed:
Make the element completely separate from the document flow.
Make the inline element support the width and height (let the inline have the fast nature)
make the width and height of the fast element be determined by the content (let the fast determine the nature of the inline)
relative to the entire browser window shift

5. Sticky positioning
In the designated position, sticky positioning
(for the time being considered: only for the first level of label)

6. z-index positioning level
a. z-index will only take effect when there is a position
b. Priority will be given to z-index of the same level or parent level

Test code while learning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body{height: 1000px;}

        .box1{ border: 5px red solid; margin-top: 500px; }

        .box2{ width: 100px; height: 100px; background: springgreen; position: absolute; top: 300px; left: 130px;}
        .box3{ width: 100px; height: 100px; background: yellow; position: absolute;} */

        /* body{height: 3000px; background: darkmagenta;}

        .box1{ border: 5px red solid; margin-top: 300px; }

        .box2{ width: 100px; height: 100px; background: springgreen; position: fixed; top: 300px; left:200px ; }
        .box3{ width: 100px; height: 100px; background: yellow;} */

        /* body{height: 3000px; background: darkmagenta;}
        .box1{ border: 5px red solid; margin-top: 300px;  position: sticky; top: 100px;}
        .box2{ width: 100px; height: 100px; background: springgreen; }
        .box3{ width: 100px; height: 100px; background: yellow;} */


        body{height: 3000px; background: darkmagenta; }
        .box1{ border: 5px red solid; margin-top: 100px;position: relative; z-index: 2;}
        .box2{ background: rgb(2, 250, 2); width: 100px; height: 100px; position: relative; z-index: 3000;}
        .box3{ background: mediumblue; width: 200px; height: 200px; margin-top: -50px; position: relative; z-index: 3;}
        .box4{ border: 5px rgb(238, 255, 0) solid;}







    </style>
</head>
<body>
    <!-- <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div> -->
    
    <div class="box1">
        <div class="box2"></div>
        
    </div>

    
    <div class="box4">

        <div class="box3"></div>
    </div>

</body>
</html>

2. Positioning the drop-down list box
1. After writing the style and positioning it, use display: none to hide
2. Use pseudo-element: hover{dispaly:block} to display

2020-1-22 css positioning notes

Guess you like