Standard Flow – Normal Flow

Make writing a habit together! This is the 12th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details

By default, elements are arranged in normal flow(standard flow, regular flow, normal flow, document flow)

  1. Block-level elements occupy a single line, and multiple inline elements or block-level elements can be displayed on the same line
  2. The elements are arranged in order from left to right and top to bottom
  3. By default, elements do not stack on each other

In standard flow, you can use margin and padding to position elements

But in standard stream, setting margin or padding on one element will affect the positioning of other elements in standard stream

In addition, in standard flow, it is not easy to achieve the effect of overlapping elements

CSS provides the position attribute to help you pull an element out of the standard stream (de-scaling) and position it

This parameter is optional for the position property

value instructions
static Static positioning,

The default value,

In other words, the layout is Normal flow
relative Relative positioning
absolute Absolute positioning
fixed Fixed position
sticky Viscous positioning

If an element has a position value other than static

So we think of this element as a c-rime, a positioned element.

For positioning elements, we can set the left, right, top, bottom attributes to achieve position adjustment

Relative position – relative

.box {
  /* Enable relative positioning for an element by setting position to relative */
  position: relative;
}
Copy the code

  • Relative positioning does not deviate from the standard flow, so its elements themselves still occupy space

  • You can locate the vm using the left, right, top, and bottom options

  • For elements with relative positioning enabled, left, right, top, and bottom are set

    Similar to margin-left, margin-right, margin-top, margin-bottom

  • A positioning reference is the original position of the element itself

The application scenario of relative positioning is to fine-tune the position of the current element without affecting the position of other elements

Example:

<! DOCTYPEhtml>
<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>
    span {
      position: relative;
      font-size: 12px;
      bottom: 5px;
    }
  </style>
</head>
<body>
  2<span>3</span> + 3<span>2</span> = 17
</body>
</html>
Copy the code

Fixed position – fixed

.box {
  /* Enable relative positioning for an element by setting position to fixed */
  position: fixed;
}
Copy the code
  • Elements out of normal flow
  • You can locate the vm using the left, right, top, and bottom options
  • The reference object is the viewport.
    • Because the viewPort is fixed when the canvas is scrolling, elements that have fixed positioning enabled are also fixed

Example:

<! DOCTYPEhtml>
<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>
    .operate {
      position: fixed;
      right: 30px;
      bottom: 30px;
    }

    .btn {
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: gray;
      color: #fff;
      border-radius: 5px;
    }

    .top {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div class="operate">
    <div class="btn top">At the top of the</div>
    <div class="btn feedback">feedback</div>
  </div>
</body>
</html>
Copy the code

Absolute location – Absolute

  1. Elements with absolute positioning enabled leave Normal flow
  2. You can locate the vm using the left, right, top, and bottom options
    • The positioning reference object isThe closest located ancestor element
    • ifNo such ancestor element can be found. The reference object is viewport

The positioning reference element for the element with absolute positioning enabled is the nearest positioning element, i.e. the most recent position is not a fixed element

And most of the time, we want the parent element to be the reference element to the absolute location element,

So in the vast majority of cases, the positioning reference elements of absolute positioning elements turn on relative positioning

Because the relative positioning becomes the positioning element, but does not deviate from the standard, we can be referred to as the child absolute parent phase

Absolute positioning element characteristics

  1. You can set the width at will and the element width is determined by the content by default
    • At this point, it looks like the property is the same as the property of an inline block-level element, but it is not an inline block-level element
    • An element is said to be absolute when its position is absolute or fixed(absolutely positioned element)
  2. No longer constrained by the standard flow
  • No longer strictly arranged from top to bottom, left to right
  • No longer strictly distinguish between block level, inline level, inline-block level
  1. No longer report its width or height to the parent element
  2. The internal layout of the off-scale elements is still standard flow by default

In addition, for absolutely positioned elements, there is the following calculation

The width of the positioning reference object = left + right + margin-left + margin-right + the actual occupied width of the absolute positioning element

Height of the reference object = top + bottom + margin-top + margin-bottom + Absolute height of the reference element

Using the above features, we can achieve the following effects:

<! DOCTYPEhtml>
<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>
    .father {
      width: 300px;
      height: 300px;
      background-color: red;
      position: relative;
    }

    Father fatherWidth = childWidth + left + right + marginLeft + marginRight MarginRight defaults to 0 and you get 300 = auto + 0 + 0 + 0 + 0 + 0 although by default the width of the relative positioning element is auto, The width and height is the width and height of the contents that are contained but the essence of auto is that it's up to the browser to determine what value to display so in this case auto is 300 height and the same thing */
    .child {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: blue;
    }
  </style>
</head>
<body>
  <! The width and height of the absolute positioning element are the same as the positioning reference object.
  <div class="father">
    <div class="child"></div>
  </div>
</body>
</html>
Copy the code
<! DOCTYPEhtml>
<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>
    .father {
      width: 300px;
      height: 300px;
      background-color: red;
      position: relative;
    }

    /* The reference element for div. Child is box. Father tips: 1. Auto fatherWidth = childWidth + left + right + marginLeft + right Set childWidth to 100 to 300 = 100 + 0 + 0 + 0 + 0 + 0 => by default, The browser will assign all the remaining values to marginRight but I'm going to set margin to auto => 300 = 100 + 0 + auto + auto => 2Auto = 300 => auto = 150 => MarginLeft = marginRight = 150 => div.child centered vertically */
    .child {
      width: 100px;
      height: 100px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: blue;
    }
  </style>
</head>
<body>
  <! -- The absolute positioning element is centered in the positioning reference object -- both horizontally centered and vertically centered -->
  <div class="father">
    <div class="child"></div>
  </div>
</body>
</html>
Copy the code

Sticky positioning – sticky

There is also a value of position: sticky, which is newer than the other values.

Sticky can be seen as a combination of relative positioning and fixed (absolute) positioning – in terms of display effect

It allows the positioned element to behave as if it were relatively positioned until it scrolls to a threshold point

When this threshold point is reached, it becomes fixed (absolute) positioning

Sticky is relative to the nearest scrolling ancestor, that is, it is relative to the scrollport

<! DOCTYPEhtml>
<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>
      body {
        height: 200vh;
      }

      .scrollview {
        width: 300px;
        height: 300px;
        margin: 100px auto;
        border: 1px solid red;
        overflow: auto;
      }

      h2 {
        margin: 10px 0;
        padding: 0;
        text-align: center;
      }

      .box {
        background-color: #f00;
        color: #fff;
        /* The nearest scrolling parent is div.scrollView */
        position: sticky;
        /* Change from relative to fixed when the top edge of the current element overlaps with the nearest parent scroll element */
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="scrollview">
      <h2>lorem</h2>
      <div class="box">this is navbar</div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, aperiam.
      Fuga recusandae laboriosam cumque quasi eum molestias asperiores a minima?
      Consequatur alias quam placeat hic neque esse nisi voluptate quas!
      Eveniet doloremque enim ducimus quas tempora vel sit iure facere.
      Quis blanditiis quibusdam, explicabo qui dolores possimus dignissimos modi dolorum.
      Debitis, ex quo! Similique aut, impedit est eos qui molestiae.
      Ipsa explicabo voluptate expedita dolor obcaecati! Natus libero corrupti excepturi?
      Rerum optio quas cum eaque architecto cumque itaque veniam sit?
      Ad itaque aliquid quaerat error ipsum accusantium nesciunt minus et.
      Iste vitae non vero dicta cupiditate dolorem maiores. Dolorum, obcaecati.
    </div>
  </body>
</html>
Copy the code

Comparison of postiton values

Sticky in effect switches between multiple location states, so it is not listed in the table

For positioning elements, when left, right, top, and bottom are not set, their default values are auto

In the form of

  1. Reach the upper left corner of the parent location element as far as possible (where left and top are 0).
  2. The element after the positioning element moves up
  3. The element before the location element does not move and is not overwritten by the location element

<! DOCTYPEhtml>
<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>
      span {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: rgba(0.0.0.0.5);
      }
    </style>
  </head>
  <body>
    <div class="before"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, consequatur. </div>
    <! -- Left,top,rignt, and bottom are left,top, and bottom. By default, the left and top values are 0 as much as possible, but the span element does not overwrite the elements before it, so the elements after the span element will not overwrite the elements before it. So the span element is overlapped with the div.after element so you can see that the grey box overlaps the second line of text -->
    <span></span>
    <div class="after">Animi, cum! Itaque numquam rem modi nisi perferendis dolores praesentium!</div>
  </body>
</html>
Copy the code

z-index

For positional elements, by default, the element written after is layered on top of the one written before

If we need to adjust the cascading order of positioning elements, we can use z-index

Z-index can be a positive integer, a negative integer, or 0

The default z-index value is auto. The z-index value is the same as that of 0

Comparison principle of Z-index

  1. Locate elements for siblings
    • 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
  2. If not brotherly
    • From the element itself and from the ancestor elementThe adjacentCompare the positioning elements of
    • And the two positioning elements must have a specific value to set the Z-index

<! DOCTYPEhtml>
<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>
      .box {
        width: 100px;
        height: 100px;
        color: #fff;
        position: absolute;
      }

      .box1 {
        background-color: #f00;
        z-index: 1;
      }

      .box2 {
        background-color: #0f0;
        left: 20px;
        top: 20px;
        z-index: 2;
      }

      .inner-box {
        width: 50px;
        height: 50px;
        background-color: yellow;
        color: red;
        position: absolute;
        /* In this case, div. Inner-box has a z-index of 999, but it has no sibling location elements, so find the nearest location elements and compare them to div.box1, div.box2, div.box3 So even if the z-index value of div. Inner-box is larger, it will still be overwritten by the div. Box3 element */
        z-index: 999;
      }

      .box3 {
        background-color: #00f;
        left: 40px;
        top: 40px;
        z-index: 3;
      }
    </style>
  </head>
  <body>
    <div class="box box1">1</div>
    <div class="box box2">
      <div class="inner-box">2</div>
    </div>
    <div class="box box3">3</div>
  </body>
</html>
Copy the code