Positioning with several common attributes

Positioning in two parts

　　Positioning mode:

　　　　Static positioning: static

　　　　　　　　　(With standard flow conditions)

　　　　Relative positioning: relative narcissistic 1 moves relative to their original position

　　　　　　　　　　　　　　　　2. without departing from the standard flow, occupies the original position

　　　　Absolute positioning: absolute

　　　　　　　　　　1. If no parent or no parent element is set to locate it in a browser would

　　　　　　　　　　2. If the older (above the parent element and a fixed relationship relative absolute) , based on the last element there are positioned a parent as a reference

　　　　　　　　　　3. from the standard flow, no longer occupy their original positions

　　　　Fixed positioning: fixed

　　　　　　　　　　1. opposite to the visual window of the browser to decide

　　　　　　　　　　2. from the standard flow , no longer occupy their original positions

　　　　　　　　　　Small way fixed positioning algorithm: let percent of the visible window of the 50 version of the heart box and then position margin-left half of the small box to the right version of the heart

　　　　Positioning sticky: sticky

　　　　　　　　　　1. visual browser window move elements 2. occupies the original position 3. must add top left right bottom of which a valid

　　Determining a final position of the element: shift up and down sides

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <Title> positioning of two parts positioned up and down mode + the offset edge </ title>
    <style>
        /*body {*/
        /*    height: 3000px;*/
        /*}*/
        .box1 {
            position: relative;
            top: 100px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: deeppink;
        }
        .box2 {
            width: 100px;
            height: 50px;
            background-color: #a180ff;
        }

        .father {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: #ff6b75;
        }

        .son {
            / * Parent element relative positioning of child elements absolutely positioned parent with child Jedi * /
            position: absolute;
            left: 50px;
            bottom: 50px;
            width: 100px;
            height: 100px;
            background-color: #b9ffa7;
        }

        .dj {
            position: fixed;
            top: 0;
            right: 0;
        }

        .box3 {
            position: fixed;
            left: 50%;
            margin-left: 405px;
            margin-top: 200px;
            width: 50px;
            height: 100px;
            background-color: #ff171d;
        }

        .box4 {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            background-color: magenta;
        }

        .box5 {
            / * * Viscosity positioning /
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: #84ffd2;
            margin: 100px auto;
            text-align:center ;
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
        }

        .xiongda {
            width: 200px;
            height: 200px;
            background-color: magenta;
            z-index: 1;
        }

        .xionger {
            width: 100px;
            height: 100px;
            background-color: lime;
            z-index: 2;
        }


        .qiangge {
            width: 50px;
            height: 50px;
            background-color: blue;
        }

        .boxes {
            position: absolute;
            left: 50%;
            margin-left: -100px;

            top:50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>

<div class="box1"></div>
<div class="box2"></div>

<div class="father">
    <div class="son"></div>
</div>

<div class="dj">
    <img src="background-img-repeat.png" alt="">
</div>

<div class="box3"></div>
<Div class = "box4"> version of the heart box fixed positioning </ div>

<Div class = "box5"> sticky targeting </ div>

<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<Div class = "box qiangge"> Strong bald </ div>

<P> how to make absolute level box positioning and vertical centering </ p>
<div class="boxes"></div>
</body>
</html>

Hide and display of several properties

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <Title> Show hidden Visibility </ title>
    <style>
        .box1, .box2 {
            width: 100px;
            height: 100px;
            background-color: #ff5ab4;
        }
        .box1 {
            / * Hide not take up their original positions * /
            /*display: none;*/
            / * Hide but to take up their original positions * /
            /*visibility: hidden;*/
            / * Overflow operations occur * /
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1">
        visible defaults. Content will not be pruned, there will be elements outside the box.
        hidden content will be trimmed, and the remaining content is not visible.
        scroll content will be trimmed, but the browser will display the scroll bar to view the rest of the content.
        If the content is auto trim, the browser will display the scroll bar to view the rest of the content.
        inherit provisions should inherit the value of the overflow property from the parent element. </ Div>
    <div class="box2">2</div>
</body>
</html>

Positioning with several common attributes

Guess you like