9-positioning of CSS layout

1 static positioning

The default positioning method means that an element is positioned in the default document flow

position:static

2 relative positioning

Position relative to its original position

position: relative;
be careful
  • Relative positioning is not separated from the standard flow, and will continue to occupy a space in the standard flow
  • In relative positioning, only one positioning attribute can be used in the same direction
  • Since the relative positioning is not separated from the standard flow, block level elements / in line elements / in line block level elements are distinguished in the relative positioning
  • Setting attributes such as margin/padding for relatively positioned elements will affect the layout of standard flow

3 absolute positioning

Is located relative to the nearest parent element that is not static

position: absolute;
Reference point

  • By default, all absolutely positioned elements, whether or not there are ancestor elements, will take body as the reference point

  • If an absolutely located element has an ancestor element and is a location stream (except static), the absolutely located element will take the ancestor element of the location stream as the reference point.

  • If an absolutely located element has multiple ancestor elements of the location stream, select the ancestor element closest to the element (proximity principle)

be careful
  • Absolute positioning is out of standard flow
  • In absolute positioning, block level elements / inline elements / inline block level elements are distinguished
  • An absolutely positioned element ignores the padding of the ancestor element
The child's absolute parent phase is set to be horizontally and vertically centered
You only need to set the value of the absolute positioning element left:50%;
Then set the absolute positioning element margin-left: -Half the width of the element px;

.div1{
    width: 400px;
    height: 300px;
    background-color: red;
    /* Relative positioning */
    position: relative;
}
.div2{
	width: 100px;
	height: 100px;
	background-color: blueviolet;
	/* Absolute positioning */
	position: absolute;
	/* Absolute positioning horizontal center */
	left: 50%;
	top: 50%;
	margin-left:-50px;
	margin-top: -50px;
  
}
<div class="div1">
	<div class="div2"></div>
</div>

4 fixed positioning

It is fixed relative to the browser window and will not scroll with the screen

position: fixed;
be careful
  • Fixed positioning elements are separated from the standard flow and will not occupy the space in the standard flow
  • Fixed positioning does not include intra branch / block level / intra bank block level

5 viscous positioning

A special positioning system that combines the two positioning functions of position:relative and position:fixed

Sticky positioning can fix an element when it reaches a position

position: sticky;
be careful
  • Sticky positioning does not break away from the document flow
  • Parent element cannot have overflow:hidden or overflow:auto attributes
  • The height of the parent element cannot be lower than the height of the sticky element
  • You must specify one of the four values top, bottom, left and right
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* Style parent container */
        .container{
            width: 726px;
            height: 8888px;
            /* background-color: gray; */
            margin: 0 auto;
        }
        /* Sets the sticky positioning of the navigation bar */
        .container ul{
            position: sticky;
            top: 0;
        }
        /* Set the style of the first level menu */
        .container ul li{
            /* Clear style */
            list-style: none;
            /* Clear float */
            float: left;
            width: 120px;
            height: 50px;
            background-color: royalblue;
            /* Text centered */
            text-align: center;
            /* Row height */
            line-height: 50px;
            /* border-right  */
            border-right: 1px solid white;
            /* Relative positioning */
            position: relative;

        }
        /* Style a labels */
        .container ul li a{
            color: white;
            /* Clear underline */
            text-decoration: none;
        }
        /* Primary menu hover color */
        .container ul li:hover{
            background-color: rgba(65,105,225,0.5);
        }
        /* The secondary menu is hidden by default */
        .container ul li ul{
            /* hide */
            display: none;
            /* Absolute positioning */
            position: absolute;
            top: 50px;
        }
        /*The secondary menu is displayed when the primary menu hover s */
        .container ul li:hover ul{
            display: block;
        }
    </style>
</head>
<body>
    <!-- seize a seat div -->
    <div class="header" style="height: 100px;"></div>
    <div class="container">
        <!-- First level menu -->
        <ul>
            <li><a href="#"> Home Page</a></li>
            <li>
                <a href="#"> home life</a>
                <!-- Secondary menu -->
                <ul>
                    <li><a href="">Column 1</a></li>
                    <li><a href="">Column 2</a></li>
                    <li><a href="">Column 3</a></li>
                </ul>
            </li>
            <li><a href="#"> clothing shoe bag</a></li>
            <li><a href="#"> gourmet drinks</a></li>
            <li><a href="#"> personal care cleaning</a></li>
            <li><a href="#"> Sports Travel</a></li>
        </ul>
        <!-- Content area -->
        <div class="content">
            <div>I'm the first div</div>
            <div>I'm the second div</div>
            <div>I'm the third div</div>
            <div>I'm the fourth div</div>
            <div>I'm the fifth div</div>
            <div>I'm the sixth div</div>
            <div>I'm the seventh div</div>
            <div>I'm the eighth div</div>
            <div>I'm the ninth div</div>
            <div>I'm the 10th div</div>
            <div>I'm the 11th div</div>
            <div>I'm the 12th div</div>
            <div>I'm the 13th div</div>
            <div>I'm the 14th div</div>
            <div>I'm the 15th div</div>
            <div>I'm the 16th div</div>
            <div>I'm the 17th div</div>
            <div>I'm the 18th div</div>
            <div>I'm the 19th div</div>
            <div>I'm the 20th div</div>
            <div>I'm the 21st div</div>
            <div>I'm the 22nd div</div>
            <div>I'm the 23rd div</div>
            <div>I'm the 24th div</div>
            <div>I'm the 25th div</div>
            <div>I'm the 26th div</div>
            <div>I'm the 27th div</div>
            <div>I'm the 28th div</div>
            <div>I'm the 29th div</div>
            <div>I'm the 30th div</div>
            <div>I'm the 31st div</div>
            <div>I'm the 32nd div</div>
            <div>I'm the 33rd div</div>
            <div>I'm the 34th div</div>
            <div>I'm the 35th div</div>
            <div>I'm the 36th div</div>
            <div>I'm the 37th div</div>
            <div>I'm the 38th div</div>
            <div>I'm the 39th div</div>
            <div>I'm the 40th div</div>
            <div>I'm the 41st div</div>
            <div>I'm the 42nd div</div>
            <div>I'm the 43rd div</div>
            <div>I'm the 44th div</div>
            <div>I'm the 45th div</div>
            <div>I'm the 46th div</div>
            <div>I'm the 47th div</div>
            <div>I'm the 48th div</div>
            <div>I'm the 49th div</div>
            <div>I'm the 50th div</div>
            <div>I'm the 51st div</div>
            <div>I'm the 52nd div</div>
            <div>I'm the 53rd div</div>
            <div>I'm the 54th div</div>
            <div>I'm the 55th div</div>
            <div>I'm the 56th div</div>
            <div>I'm the 57th div</div>
            <div>I'm the 58th div</div>
            <div>I'm the 59th div</div>
            <div>I'm the 60th div</div>
            <div>I'm the 61st div</div>
            <div>I'm the 62nd div</div>
            <div>I'm the 63rd div</div>
            <div>I'm the 64th div</div>
            <div>I'm the 65th div</div>
            <div>I'm the 66th div</div>
            <div>I'm the 67th div</div>
            <div>I'm the 68th div</div>
            <div>I'm the 69th div</div>
            <div>I'm the 70th div</div>
            <div>I'm the 71st div</div>
            <div>I'm the 72nd div</div>
            <div>I'm the 73rd div</div>
            <div>I'm the 74th div</div>
            <div>I'm the 75th div</div>
            <div>I'm the 76th div</div>
            <div>I'm the 77th div</div>
            <div>I'm the 78th div</div>
            <div>I'm the 79th div</div>
            <div>I'm the 80th div</div>
            <div>I'm the 81st div</div>
            <div>I'm the 82nd div</div>
            <div>I'm the 83rd div</div>
            <div>I'm the 84th div</div>
            <div>I'm the 85th div</div>
            <div>I'm the 86th div</div>
            <div>I'm the 87th div</div>
            <div>I'm the 88th div</div>
            <div>I'm the 89th div</div>
            <div>I'm the 90th div</div>
            <div>I'm the 91st div</div>
            <div>I'm the 92nd div</div>
            <div>I'm the 93rd div</div>
            <div>I'm the 94th div</div>
            <div>I'm the 95th div</div>
            <div>I'm the 96th div</div>
            <div>I'm the 97th div</div>
            <div>I'm the 98th div</div>
            <div>I'm the 99th div</div>
            <div>I'm the 100th div</div>
        </div>
    </div>
</body>
</html>

z-index

The z-index attribute sets the stacking order of elements. Elements with a higher stacking order always precede elements with a lower stacking order. The default z-index is 0

be careful

From parent phenomenon

  • If the parent element of both elements does not have the z-index attribute set, the larger z-index attribute will be displayed on it.
  • If the z-index attribute is set on the parent element of two elements, the z-index attribute of the child element will be invalid, and the parent element whose z-index attribute is larger will be displayed on it
```

z-index

The z-index attribute sets the stacking order of elements. Elements with a higher stacking order always precede elements with a lower stacking order. The default z-index is 0

be careful

From parent phenomenon

  • If the parent element of both elements does not have the z-index attribute set, the larger z-index attribute will be displayed on it.
  • If the z-index attribute is set on the parent element of two elements, the z-index attribute of the child element will be invalid, and the parent element whose z-index attribute is larger will be displayed on it

Added by RP on Mon, 20 Dec 2021 14:32:05 +0200

Popular Keywords

©2025 Programming VIP