Lead review

Review the previous article:

CSS Visual Formatting Model

  • Size and type of box model
  • Positioning solutions [Normal document flow, floating and Absolute positioning]
  • Relationships between elements within a document tree
  • External information (viewport size, intrinsic size of picture, etc.)

In summary, the Visual Formatting Model determines how the browser displays and processes the document tree. The box type and positioning scheme determine how element boxes are displayed and placed in the document tree.

How to understand the APPLICATION of BFC Our page may be a very complex page, but our initial page writing is based on the above structure. At this point, the entire document flow has only one BFC environment, which is HTML. So the internal elements of the box collapse, floating and other problems, according to the rules. So we create a new BFC internally according to rule 3 above. You can solve the problem.

This article will study position in the positioning scheme


Normal document flow

A normal document flow layout is a system that places elements inside a browser viewport.

  • Block-level elements are laid out vertically in the viewport — each will appear on a new line below the previous element, and their margins will separate them.
  • Inline elements behave differently — they don’t appear on new lines; Instead, they are on the same line as each other and any adjacent (or wrapped) text content, as long as there is room within the parent block-level element’s width to do so. If there is no space, the overflow text or element is moved down to the new line.
  • If two adjacent elements have margins on them, and they touch each other, the larger of the two margins remains and the smaller disappears — this is called margin folding, which we’ve seen before.


The basic definition

Define and use the position attribute to specify the positioning type of an element. Positioning allows you to take elements out of the normal document flow layout and have them behave differently, such as placing them on top of another element, or always staying in the same place within the browser window.

Explains that this attribute defines the positioning mechanism used to establish the layout of elements. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the element’s own type. The relative positioning element is offset relative to its default position in normal flow.

value describe Owning document flow
static The default value. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right, or Z-index declarations). General document flow
relative Reference to their position in the conventional flow through the four positioning offset attributes of top, right, bottom, left migrationNone of the elements in the regular flow are affected General document flow
absolute Generates an absolutely positioned element relative to the first parent element other than the static positioned element. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.



The offset attribute refers to the nearest positioned ancestor, or if there is no positioned ancestor, all the way back to the body element.The offset position of the box does not affect any element in the regular flow, and its margin does not fold with any other margin		 Out of document flow
fixed Generates an absolutely positioned element, positioned relative to the browser window.

The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.



Same as absolute, but the offset positioning is based on the window reference. When a scroll bar appears, the object does not scroll along		 Out of document flow
inherit Specifies that the value of the position attribute should be inherited from the parent element.




Attribute values

Static positioning static

HTML elements are positioned static by default. Statically positioned elements are not affected by the top, bottom, left, and right attributes. position: static; Elements are not positioned in any particular way; It is always positioned according to the normal flow of the page:

.positioned {
  position: static;
  background: yellow;
}
Copy the code


Relative positioning

position: relative; Is positioned relative to its normal position. Setting the top, right, bottom, and left attributes of a relative positioned element will cause it to adjust out of its normal position. The rest of the content is not adjusted to fit any space left by the element.

The positnion values of the element are relative and static, and the containing block consists of the nearest block-level box cell or the fastest content boundary within the line

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <title>Static positioning</title>

    <style>
      .block {
          width: 400px;
          height: 200px;
          background-color: # 669966;
          border: 5px solid #3333FF; 
      }
       
      .relative {
          width: 100px;
          height: 50px;
          background-color: # 484848;
          border: 5px solid # 990066; 
          position: relative;
          top: 10px;
      }
       
      .inline {
          background-color: #00CC00;
          border: 5px solid # 990066; 
      }
       
      table td {
          background-color: #00CC00;
      }
       
      strong {
          position: relative;
          top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="block">
        <div class="relative">
            relative text
        </div>
    </div>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <tr>
            <td>
                <div class="relative">
                    relative text
                </div>
            </td>
        </tr>
    </table>
    <br /><br />
    <span class="inline">
        Test inline text 
        <strong>this is strong text</strong>
    </span>
  </body>
</html>
Copy the code



Of course, this example doesn’t have much to do with containing blocks, since the element offset here is its own original position.




Absolute positioning

Pre-review: Include blocks

CSS Visual Formatting Model

  1. The contain block in which the root element resides is called the initial contain block.
  2. If the element’s position property is releative or static. The containing block is the nearest block-level box or the ancestor element that establishes the format context.
  3. If the position attribute of the element is fixed. Continuous media containing blocks as viewports. Multi-page media, containing blocks as page areas.
  4. If the position attribute of the element is absolute. Contains the block by hasPosition: ‘absolute’, ‘relative’ or ‘fixed’theRecent ancestral elementSet up.
    1. If the ancestor element is inline, the contain block is the first inline element created by the current inline element and the bounding box around the padding box of the last inline element
    2. In other cases, the containing block is composed of an ancestor’s fill edge.
  5. If there is no parent above, the contain block is the initial contain block.


Absolute positioning, positioning element rules

The position value of the element is absolute and contains an ancestor element whose position value is set to the nearest and not static

  1. If the ancestor is a block-level element containing a block, it is set to the inner margin boundary within that element, in other words, the area bounded by the border, as in 4.b above.
  2. If the ancestor element is an inline element, the containing block is set to the content boundary within that ancestor element refer to 4.a above.
  3. If no ancestor element is found, the root element is the baseline.
<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <title>Static positioning</title>

    <style>
      .block {
          width: 400px;
          height: 200px;
          background-color: # 669966;
          border: 5px solid #3333FF; 
      }
       
      .absolute {
          width: 100px;
          height: 50px;
          background-color: # 484848;
          border: 5px solid # 990066; 
          position: absolute;
          top: 10px;
      }
       
      .inline {
          background-color: #00CC00;
          border: 5px solid # 990066; 
      }
       
      table td {
          background-color: #00CC00;
      }
       
      strong {
          position: absolute;
          top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="block">
        <div class="absolute">
            absolute text
        </div>
    </div>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <tr>
            <td>
                <div class="absolute">
                    absolute text
                </div>
            </td>
        </tr>
    </table>
    <br /><br />
    <span class="inline">
        Test inline text 
        <strong>this is strong text</strong>
    </span>
  </body>
</html>
Copy the code


The result is the body of both divs and a strong element, because there is no ancestor element to refer to.





We then set the parent element to relative.

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="utf-8">
    <title>Static positioning</title>

    <style>
      .block {
          width: 400px;
          height: 200px;
          background-color: # 669966;
          border: 5px solid #3333FF;
          position: relative;
      }
       
      .absolute {
          width: 100px;
          height: 50px;
          background-color: # 484848;
          border: 5px solid # 990066; 
          position: absolute;
          top: 10px;
      }
       
      .inline {
          background-color: #00CC00;
          border: 5px solid # 990066; 
      }
       
      table td {
          background-color: #00CC00;
          position: relative;
      }

      span {
        position: relative;
      }
       
      strong {
          position: absolute;
          top: 10px; }}</style>
  </head>
  <body>
    <div class="block">
        <div class="absolute">
            absolute text
        </div>
    </div>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <tr>
            <td>
                <div class="absolute">
                    absolute text
                </div>
            </td>
        </tr>
    </table>
    <br /><br />
    <span class="inline">
        Test inline text 
        <strong>this is strong text</strong>
    </span>
  </body>
</html>
Copy the code







Talk about the phenomenon:

  • For absolute elements, find the block-level parent of each element and offset the element by 10px relative to its block-level parent.
  • The strong element, by default, is offset above or below its original relative position. We didn’t set the left offset here, so it will be at the current position and offset down by 10px, which will have the default left offset.


We set the left of strong to 0px

strong {
	position: absolute;
	top: 10px;
	left: 0PX;
}
Copy the code



We can see here that this is strong text has changed position, and here because we’ve set left to 0. Here’s why the text text comes down here. Again because it contains blocks, see above4.a containing blocks.


Fixed position

position: fixed; The element is positioned relative to the viewport, meaning that it is always in the same position even if the page is scrolling. The top, right, bottom, and left attributes are used to locate this element. Fixed positioned elements do not leave gaps where they would normally be placed on a page.

.positioned {
  position: fixed;
  background: yellow;
}
Copy the code


Sticky positioning

position: sticky; The element is positioned based on the user’s scroll position. Sticky elements switch between relative and fixed depending on where they roll. It is initially positioned relative to each other until a given offset is encountered in the viewport – and then “pasted” into the appropriate position (such as position:fixed).

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}
Copy the code

Note: Internet Explorer, Edge 15, and earlier versions do not support sticky targeting. Safari requires the -webkit- prefix. You must also specify at least one of top, right, bottom, or left for sticky positioning to work.


z-index

Elements can overlap with other elements when they are positioned. The Z-index attribute specifies the stack order of elements (which elements should be placed before or after other elements). Of course, this has to do with the cascading context, the cascading level, and the cascading context.

z-index: auto |<integer>

  • Auto: The element has a cascading level of 0 in the current cascading context. Element does not create a new local cascading context unless it is the root element.
  • <integer>: Uses integer values to define stack levels. It can be negative.

Using the Z-index, you can change the order in which elements cover each other. The name for this attribute comes from a coordinate system where the X-axis is from left to right and the Y-axis is from top to bottom. The third axis is the Z-axis, which is oriented towards the document flow.



div {
    position: absolute;
}
 
.first {
    width: 400px;
    height: 400px;
    background-color: red;
}
 
.second {
    width: 200px;
    height: 200px;
    background-color: gray;
}
 
.third {
    width: 100px;
    height: 100px;
    background-color: blue;
}
Copy the code
<div class="first">      
</div>
<div class="second">      
</div>
<div class="third">      
</div>

Copy the code





At this point in the figure, without z-index set, the three divs are arranged according to the way the document is loaded. At this point, we set the z-index of the third div to 0 and there is no change. Z-index defaults to 0. When I set z-inde to -1, the current div will be overwritten by the previous two divs.


  • The z-index comparison is basically at the same level, that is, with the same parent element. If it is a comparison of different levels, it depends on the weight of z-index, and depends on the cascading context.
  • The z-index property sets the stack order of elements. Elements with a higher stack order will always precede elements with a lower stack order


  • Note: Elements can have a negative z-index attribute value.
  • Note: Z-index only works on position elements (position values set to elements other than the default static, including relative, Absolute, and fixed styles)