define

The position attribute is used to specify the position of an element on the web page. In the afternoon, it is mainly narrated from three dimensions: reference point, off-scaling and occupying position, and whether margins need to be set. There are altogether five positioning modes: static, relative, Absolute, fixed, and sticky. Before we talk about positioning, let’s talk about a few concepts: normal mode and de-scaling:

Normal mode:

The so-called normal mode, which is normally occupied, does not affect the layout of the next element, that is, it does not float. Common examples are block-level elements and inline elements:

  • Block-level elements (typically such asdivLayout them vertically in the browser window (view point) — each will be displayed on a new line below the previous element, and their margins will separate them, common as multiple divs:

// html
<body>
    <div>I am div1</div>
    <div>I am div2</div>
    <div>I am div3</div>
</body>

// css
div {
	background-color: lightgrey;
	width: 100px;
	height: 50px;
} 
div:nth-child(2) {
	background-color: yellow;
	width: 100px;
	height: 50px;
}
div:last-child {
	background-color: red;
	width: 100px;
	height: 50px;
}
Copy the code
  • 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.

// html
<body>
    <span>I am span1</span>
    <span>I am span2</span>
    <span>I am span3</span>
</body>
// css
span {
	background-color: lightgrey;
	width: 100px;
	height: 50px;
} 
span:nth-child(2) {
	background-color: yellow;
	width: 100px;
	height: 50px;
}
span:last-child {
	background-color: red;
	width: 100px;
	height: 50px;
}
Copy the code

Take off the mark

The so-called off-scaling refers to the separation from the “standard flow” (some are called “normal flow”, English is “normal flow”), the original occupied position is no longer occupied, the next element will occupy its position, at this time elements will appear overlapping phenomenon, by setting the z-index size to display the element overlapping order.

The static positioning

Static is the browser’s default positioning. If you do not add position to the style element, it is static. The characteristics of the positioning are:

  • Reference point: determines the layout of elements in code order, in a normal display mode, known as “standard flow”.
  • Edge offset: Invalid by setting top right bottom left.
  • Off – scale: not off – scale, normally occupy the position, does not affect the next element layout.
  • Use static to check the location of a box. Static to check the location of a box. Static to check the location of a box.

// html
<body>
    <div>test static position</div>
</body>

// css
div {
  background-color: pink;
  top: 100px;
} 
Copy the code

Relative positioning

1. Relative Is a type of relative positioning characterized by:

  • Reference point: Its position in static positioning mode as a reference point, commonly known as the element’s default position.
  • Edge offset: Must be accurately located by setting top/right/bottom/left.
  • Off – scaling: Not off – scaling, normally in place, does not affect the layout of the next element, the next element still view it as “standard flow”.
  • Use scenario: a very common formula “child absolute parent phase”, if the child element needs to set absolute, the parent element can be set to relative, of course, there are other scenarios, not listed here.

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

// css
.father {
	background-color: lightgrey;
	width: 300px;
	height: 200px;
} 
.son {
	background-color: yellow;
	position: relative;
	top: 20px;
	width: 200px;
	height: 100px;
} 
Copy the code

Absolute positioning

Absolute Absolute positioning mode. The features of this positioning mode are:

  • Reference point: Usually the parent element, but only if the parent element has a non-static orientation set. If the parent element has no orientation set, then the browser window is used as the base point.
  • Edge offset: Must be accurately located by setting top/right/bottom/left.
  • Off – scaling: Completely off – scaling, does not occupy the appropriate position, affects the layout of the next element, the next element as if the element does not exist.
  • Absolute can be used immediately if an element needs to be aligned with the (0,0) coordinates of the parent element. Absolute can also be used when converting to inline-block mode.

//html
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
</body>
// css
.father {
	background-color: lightgrey;
	width: 300px;
	height: 200px;
} 
.son {
	background-color: yellow;
	position: absolute;
	top: 20px;
	width: 100px;
	height: 100px;
} 
.son2 {
	background-color: red;
	top: 20px;
	width: 200px;
	height: 150px;
} 
Copy the code

Fixed position

Fixed Fixed positioning mode, which is characterized by:

  • Reference point: The browser window is the base point that is fixed no matter how the page is laid out or scrolled.
  • Edge offset: Must be accurately located by setting top/right/bottom/left.
  • Off – scaling: Completely off – scaling, does not occupy the appropriate position, affects the layout of the next element, the next element as if the element does not exist.
  • Usage scenario: for example, the page of hateful ads, you slide to stop there.

// html
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
</body>

// css
.father {
	background-color: lightgrey;
	width: 300px;
	height: 200px;
} 
.son {
	background-color: yellow;
	position: fixed;
	right: 10px;
	width: 100px;
	height: 100px;
} 
.son2 {
	background-color: red;
	top: 20px;
	width: 200px;
	height: 150px;
} 
Copy the code

Sticky positioning

Sticky sticky positioning mode, which contains relative and fixed positioning modes, but they do not exist at the same time. A trigger condition is required, that is, the fixed mode will be switched when the edge offset top/right/bottom/left value is reached. The positioning features of different positioning methods are displayed respectively.

  • 1. The relative mode refers to its own position as the reference point. Fixed mode is based on the browser window.
  • Edge offset: If top/right/bottom/left is set, both “relative” and “fixed” are available. If not, “relative” is default.
  • Off standard: relative not off standard, fixed off standard
  • Usage scenario: for example, the page of hateful ads, you slide to stop there.

// html
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
</body>

// css
.father {
	background-color: lightgrey;
	position: relative;
	left: 200px;
	width: 300px;
	height: 1000px;
} 
.son {
	background-color: yellow;
	position: sticky;
	top: 30px;
	width: 90px;
	height: 60px;
} 
.son2 {
	background-color: red;
	top: 20px;
	width: 200px;
	height: 150px;
} 

Copy the code

conclusion

The above is the explanation of all kinds of positioning, in the actual work may be very complex, but the basic is the clever use of these positioning, if there is any error, welcome comments, code child code figure is not easy, code GIF figure is not easy, please indicate the source, thank you.