10. Positioning (position)

I. Normal Flow

By default, elements are arranged in normal flow (standard flow, regular flow, normal flow, document flow)
- Arrange in order from left to right and top to bottom
- By default, there is no cascading between them

2. Why not use margin and padding

In standard flow, you can use margin and padding to position elements
- Margin can also be set to negative numbers
The obvious disadvantages are
- Setting a margin or padding on an element usually affects the positioning of other elements in the standard stream
- It’s not easy to stack elements

3. Position

3.1 Location Mode

The positioning mode determines the positioning mode of an element. It is set through the POSITION property of the CSS, which can be divided into four values:

Static: indicates static location
Relative: relative position
Absolute: Indicates the absolute location
Fixed: indicates a fixed position

3.2 boundary migration

Edge offset is where the positioned box moves to its final position. There are four attributes: top, bottom, left, and right.

3.3 the static positioning

Static positioning is the default positioning of elements.
Elements are laid out in normal flow
Left, right, top, bottom

3.4 Relative Positioning

Relative positioning is when an element moves relative to its original position (narcissistic).

Grammar:

Selector {position: relative; }Copy the code

Relative positioning features :(be sure to remember)

It moves relative to its original position (the reference point for moving position is its original position).
Where the standard stream was, the box behind it still treats it like the standard stream. Therefore, there is no de-scaling of relative positioning. Its most typical application is for absolute positioning as a father…
Elements are laid out in normal flow
You can locate the vm using the left, right, top, and bottom options
Nleft, right, top, and bottom are used to set the location of the element, as shown in the figure below
Application scenarios of relative positioning
1. Fine-tune the position of the current element without affecting the position of other elements

<style> div { background-color: pink; } strong { /* position:relative 1. */ position: relative; left: 100px; top: -30px; } < / style > < body > < a href = "" > a element < / a > < strong > strong < / strong > < I > I < / I > < img SRC =".. / img/ysx. JPG "Alt =" "width =" 300 "> < div > div element < / div > < / body >Copy the code

3.4.1 Relative Positioning Exercise 1:

<! 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, < span style> sub {position: relative; top: 10px; left: 10px; } sup { position: relative; top: -20px; left: 20px; } < / style > < body > < h1 > please calculate n < sub > 1 < / sub > + n < sub > 2 < / sub > + n < sup > 2 < / sup > value < / h1 > < / body > < / HTML >Copy the code

3.4.2 Relative exercise 2

< span style> /* display the image in the center. Left: (1280-800) /2=240 */. Content {width: 800px; background-color: pink; height: 365px; margin: 20px auto; overflow: hidden; } .content>img { position: relative; left: -240px; top: 0px; } </style> <body> <div class="content"> <img src=".. /img/meng.png" alt=""> </div> </body>Copy the code

3.5 Absolute Positioning

Elements out of normal flow
You can locate the vm using the left, right, top, and bottom options
- The location reference object is the nearest location ancestor element
- If no such ancestor element is found, the reference object is the viewport
- ```
Copy the code
```

Positioning of the element

An element whose position value is not static

== that is, the elements whose position values are relative, absolute and fixed ==

 .content {
      width: 500px;
      height: 500px;
      background-color: pink;
    }
  
    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      position: absolute;
    }
  
    a {
      position: absolute;
      right: 50px;
      top: 60px;
    }
Copy the code

.content {
      width: 500px;
      height: 500px;
      background-color: pink;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      position: absolute;
      right: 50px;
      top: 50px;
    }

    a {
      position: absolute;
      right: 50px;
      top: 60px;
    }
Copy the code

3.5.1 “The Son must be the Father”

In most cases, the absolute positioning of the child element is relative to the parent element

If you want the child element to be positioned relative to the parent element, but do not want the parent element to be off-marked, the common solution is:

The parent element sets position: relative (makes the parent element a position element and does not depart from the standard stream, and the child element sets position: absolute

Referred to as “The father of the child”

3.5.2 Absolute Positioning Exercise 1:

3.5.2.1 floating + + margin margin – left – top

<! 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, < font size =" font size "href=" font size" href=".. "> <style> /* float +margin-left+margin-top */. Content {position: relative; display: inline-block; } .content>ul { width: 300px; height: 100px; position: absolute; bottom: 50px; left: 15px; } .content>ul>li { width: 70px; height: 30px; background-color: #fff; border-radius: 40px; Margin - left: 22.5 px; Margin - top: 13.3 px; text-align: center; line-height: 30px; font-size: 14px; float: left; Box-shadow: 0 0 1px raba(0, 0, 0, 0.5); } </style> </head> <body> <div class="content"> <img src="./img/beauty-left-img.jpg" alt=""> <ul> <li><a Href = "#" > delicate skin care < / a > < / li > < li > < a href = "#" > popular mask < / a > < / li > < li > < a href = "#" > big colour makeup < / a > < / li > < li > < a href = "#" > sunscreen repair < / a > < / li > < li > < a Href = "#" > attractive sweet atmosphere < / a > < / li > < li > < a href = "#" > facial cream < / a > < / li > < / ul > < / div > < / body > < / HTML >Copy the code

3.5.2.2 Float +display:inline-block+margin:0 auto; left:0; right:0+text-align: justify; text-align-last: justify;

<! 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, </title> <link rel="stylesheet" href=".. / CSS /reset.css"> <style> /* No float +display:inline-block+margin:0 auto; left:0; right:0+text-align: justify; text-align-last: justify; */ .content { position: relative; display: inline-block; } .content>ul { width: 300px; height: 100px; position: absolute; bottom: 50px; left: 0; /* text-align: justify; */ text-align: justify; text-align-last: justify; /* left: 0; /* left: 0; /* left: 0; right: 0; margin: 0 auto; }. Content >ul>li {/* leave margin-left and margin-right as inline-block */ display: inline-block; } .content>ul>li>a { display: inline-block; width: 80px; height: 30px; margin-top: 10px; background-color: #fff; border-radius: 40px; Text-align: center; text-align: center; text-align-last: center; line-height: 30px; font-size: 14px; Box-shadow: 0 0 0 1px raba(0, 0, 0, 0.5); } </style> </head> <body> <div class="content"> <img src="./img/beauty-left-img.jpg" alt=""> <ul> <li><a Href = "#" > delicate skin care < / a > < / li > < li > < a href = "#" > popular mask < / a > < / li > < li > < a href = "#" > big colour makeup < / a > < / li > < li > < a href = "#" > sunscreen repair < / a > < / li > < li > < a Href = "#" > attractive sweet atmosphere < / a > < / li > < li > < a href = "#" > facial cream < / a > < / li > < / ul > < / div > < / body > < / HTML >Copy the code

3.5.2.3 flex

3.5.3 Absolute Exercise 2: netease Kaola QRcode

<! 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, Font ="style "href=" style" href=" style "href=" style" href=" style "href=" style" href=" style "href=" style" href=".. /css/reset.css"> <style> .QR { position: relative; margin-left: 300px; font-size: 13px; text-align: center; /* background-color: pink; */ } .QR>.QRIMG { position: absolute; top: 30px; /* Move 50% to the left; */ left: 0; transform: translate(-50%); margin-left: 50%; border: 1px solid #ccc; padding: 5px 5px 0; display: none; } .QR>.QRIMG>span { display: inline-block; margin-top: 5px; } .QR>span:first-child:hover { color: red; } .QR:hover .QRIMG { /* display: block; */ /* display:inline will do, because. */ display: inline; } .arrow { position: absolute; top: -6px; left: 0; right: 0; margin: 0 auto; width: 10px; height: 10px; background-color: #fff; border-top: 1px solid #eaeaea; border-left: 1px solid #eaeaea; transform: rotate(45deg); margin-top: 0 ! important; </style> <body> <a class="QR" href=""> <span> <span class="QRIMG"> <span class="arrow"></span> <span class="arrow"></span> <img SRC = ". / img/qrcode. PNG "Alt =" "> < span > download APP < / span > < span > brought 1000 yuan new red envelope < / span > < / span > < / a > < / body > < / HTML >Copy the code

3.5.4 Absolute positioning technique

Absolutely positioned element
- The element whose position is absolute or fixed
For absolutely positioned elements
- == Width of the positioning reference object = left + right + margin-left + margin-right + actual occupied width of the absolute positioning element ==
- == Height of the positioning reference object = top + bottom + margin-top + margin-bottom + actual height of the absolute positioning element ==
If you want the absolute location element to have the same width and height as the location reference object, you can set the following properties for the absolute location element
- Left :0, right: 0, top: 0, bottom: 0, margin:0

If you want the absolute location element to be centered in the location reference object, you can set the following attributes for the absolute location element

Left: 0, right: 0, top: 0, bottom: 0, auto

In addition, you must set a specific width and height value (width and height is less than the width and height of the positioning reference object)

Horizontal vertical center: left: 0, right: 0, top: 0, bottom: 0, margin: auto
Horizontal center: left: 0, right: 0, margin:0 auto

<! 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> 1.- Width of the reference object = left + right + margin-left + margin-right + absolute width of the reference element - height of the reference object = top + bottom + margin-top + Margin - bottom + absolutely positioned elements actually take level 2. - if you want to absolutely positioned elements of high and wide positioning reference object, the following properties can be set to absolutely positioned elements - left: 0, right: 0, top: 0, bottom: 0, margin:0 3.- If you want the absolute positioning element to be centered in the positioning reference object, you can set the following attributes to the absolute positioning element - left: 0, right: 0, top: 0, bottom: 0, margin:0 */. Content {width: 600px; height: 600px; background-color: pink; position: relative; } .div { height: 100px; width: 100px; background-color: red; /* 1. If there is no content in the box, then the box will disappear. If you want the absolute location element to have the same width and height as the location reference, you can set the following attributes to the absolute location element - left: 0, right: 0, top: 0, bottom: 0, margin:0 3.- If you want the absolute positioning element to be centered in the positioning reference object, you can set the following attributes to the absolute positioning element - left: 0, right: 0, top: 0, bottom: 0, margin:0 Auto - In addition, you must set a specific width and height value (width and height is less than the width and height of the reference object) */ position: Absolute; left: 0; /* top: 0; */ right: 0; /* bottom: 0; */ margin: 0 auto; } </style> <body> <div class="content"> <div class="div"></div> </div> </body> </html>Copy the code

3.6 Positioning

Elements out of normal flow
You can locate the vm using the left, right, top, and bottom options
- The reference object is the viewport.
While the canvas is rolling, it does not move

3.6.1 Canvas and viewport

Viewport

The visual area of the document
As shown in the red box on the right

Canvas: All the contents of the progress bar

3.6.2 fixed

< span style> /* Left,right,top,bottom Viewport */ div {background-color: pink; background-color: pink; } strong { position: fixed; right: 10px; top: 300px; } < / style > < body > < a href = "" > a element < / a > < strong > strong < / strong > < I > I < / I > < img SRC =".. / img/ysx. JPG "Alt =" "width =" 300 "> < div > div element < / div > < / body >Copy the code

3.6.3 Fixed Exercises: netease Koala

<! 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, Word-wrap: break-word! Important; "> < span style>. height: 320px; border: 1px solid #eaeaea; position: fixed; right: 20px; top: 200px; text-align: center; font-size: 14px; /* line-height: 80px; */ } .fixed-box a { display: block; text-decoration: none; height: 80px; border-bottom: 1px solid #eaeaea; } .fixed-box a:last-child { border-bottom: none; } .fixed-box a>span {} .fixed-box a>i { display: block; width: 20px; height: 20px; /* background-color: red; */ margin: 0 auto 0; padding-top: 20px; } .fixed-box a:first-child:hover { background-image: url("img/icon-aside-right-signin-active.png"); background-repeat: no-repeat; background-position: center 20px; } .fixed-box a:nth-child(2):hover { background-image: url("./img/icon-aside-right-cart-active.png"); background-repeat: no-repeat; background-position: center 20px; } .fixed-box a:nth-child(3):hover { background-image: url("./img/icon-aside-right-phone-active.png"); background-repeat: no-repeat; background-position: center 20px; } .fixed-box a:last-child:hover { background-image: url("./img/icon-aside-right-top-active.png"); background-repeat: no-repeat; background-position: center 20px; } </style> <body> <div class="fixed-box"> <a href=""><i><img src="./img/icon-aside-right-signin.png" Alt = "" > < / I > < span > sign in < / span > < / a > < a href =" "> < I > < img SRC =".. / img/icon - value - right - cart. PNG "Alt =" "> < / I > < span > shopping cart < / span > < / a > <a href=""><i><img src="./img/icon-aside-right-phone.png" alt=""></i><span>APP</span></a> <a href=""><i><img src="./img/icon-aside-right-top.png" alt=""></i><span>Top</span></a> </div> </body> </html>Copy the code

3.7 the position summary

3.8 The cascade of z-index elements

The z-index property is used to set the cascading order of positioned elements (only for positioned elements)
- The value can be a positive integer, a negative integer, or 0
Comparison principle
- If it’s a brotherhood
- The larger the Z-index is, the higher it is
- The z-index is equal, and the element that comes after it is stacked on top of it
If not brotherly
- Find the two nearest locating elements from the elements themselves and their ancestors for comparison
- And the two positioning elements must have a specific value to set the Z-index