preface

Recently in learning CSS related properties, write an article here to record, so as not to forget when you can review again.

In the development requirements of the internship, we usually write the static interface first, because the layout of the web page has been designed according to the UI designer, so the design drawing often obeys the principles of beauty and design of the page, for the general framework of the page, We often can use CSS display layout of flex or grid layout grid layout, but remove the page design, the framework of a special design requirements such as small slide against the page body advertising, or a page module fixed button will not be able to just use page layout or flow to achieve the common standards. This is where we need to apply an important property in CSS called “positioning”.

What is position?

Positioning, as the name suggests, is easily associated with placing desired components in specific locations. And more seriously, in a web page, it can be understood that positioning is to allow the box to move freely within a parent box or fixed in a position, and to be able to press other boxes, that is, can not be blocked by other boxes on the page. So, what are the ways of positioning in CSS? Please look directly at the picture below

positioning Positioning mode
static Static positioning
relative Relative positioning
absolute Absolute positioning
fixed Fixed position
sticky Viscous positioning

Obviously, positioning has several properties above. When we start setting positioning, the syntax mode needs to set the positioning mode and the offset orientation of the component box. There are four properties to set the offset orientation of the box: top, bottom, left and right.

Static positioning static positioning

Static positioning is the default position value in the position attribute. Statically positioned tags are not affected by top, bottom, left, and right, and elements at the bottom of the page belong to the standard flow.

Because static positioning follows a standard flow of placement, similar to most element placement patterns, it is rarely used in web layouts for the specific needs of component box placement.

Relative position (important)

Relative positioning means that the element will move relative to its original position, and as it moves, it will continue to occupy the original position of the standard flow, and the box behind it will not be off-marked.

You can refer to the following cases:

Before setting location 👇

Code:

<style> .space_one{ background-color: aqua; height: 100px; width: 100px; } .space_two{ background-color: blueviolet; height: 100px; width: 100px; } .space_three{ background-color: red; height: 100px; width: 100px; </style> <body> <div class='space_one'> square one </div> <div class='space_two'> square two </div> </body>Copy the code

Set location 👇

Code:

<style> .space_one{ background-color: aqua; height: 100px; width: 100px; } .space_two{ background-color: blueviolet; height: 100px; width: 100px; position: relative; left: 200px; } .space_three{ background-color: red; height: 100px; width: 100px; </style> <body> <div class='space_one'> square one </div> <div class='space_two'> square two </div> </body>Copy the code

Absolute position absolute

Absolute positioning means that when an element is moving, the reference point is its parent element.

However, if there is no parent element or the parent element is not positioned (the default standard flow pattern), the absolute positioning reference point for the element is positioned by the browser. If the parent element has positioning (relative, absolute, fixed positioning), the element will be moved based on the nearest parent element that has positioning. Note that the absolute positioning does not occupy the standard stream.

  • Absolute positioning makes the position of an element independent of the document flow and does not take up space. Relative positioning is still in the standard flow, where elements are moved relative to the standard flow

For example 🌰 :

Before setting location 👇

Code (part) :

<style> .space_one{ background-color: aqua; height: 100px; } .space_two{ background-color: blueviolet; height: 50px; } .space_three{ background-color: red; height: 100px; </style> <body> <div class='space_one'> square one </div> <div class='space_two'> square two </div> </body>Copy the code

Set location 👇

Code (part) :

<style> .space_one{ background-color: aqua; height: 100px; } .space_two{ background-color: blueviolet; height: 50px; position: absolute; top:0; left: 50%; } .space_three{ background-color: red; height: 100px; </style> <body> <div class='space_one'> square one </div> <div class='space_two'> square two </div> </body>Copy the code

Since square two has no parent box, the reference point it moves to is obviously the browser, the Document document.

Rule: When the child box is absolutely positioned, the parent box uses relative positioning.

This is because when the child box is absolutely positioned, it has the effect of de-marking, does not occupy the space of the standard flow, and can be placed in any position within the parent box. When the parent box is laid out, it must occupy a position in the standard flow, so use relative positioning.

Fixed position (important)

The friend that often gets to the Internet certainly is opposite in computer page slide as the page small advertisement is not strange, in fact this kind of “stubborn small advertisement” also is a kind of realization case of positioning. This positioning is called fixed.

Definition: Fixed positioning is the position where the element is fixed in the viewable area of the browser. Use scenario: can be in the browser page scrolling, element position does not change, features:

  • Move elements with the browser’s visual window as a reference point
  • Fixed position no longer occupies the original position, and can also be regarded as a special absolute position.

Viscous positioning (Understanding)

Viscous positioning can be thought of as a mixture of relative and fixed positioning.

Features:

  • Move elements with the browser’s visual window as a reference point
  • Sticky positioning occupies the original positioning
  • You must addtop,left,right,bottomOne of them works.

It works with page scrolling, and due to the poor compatibility of Internet Explorer, it’s best to use Google Chrome.

conclusion

According to the above description, the summary is as follows:

Positioning mode Whether to take off the mark Mobile location Whether the commonly used
Static Static positioning no You cannot use edge offsets Very few
Relative positioning No (occupy position) Moving relative to itself The commonly used
Absolute absolute positioning Yes (does not occupy position) Parent with location The commonly used
Fixed Fixed position Yes (does not occupy position) Browser viewable area The commonly used
Sticky sticky positioning No (occupy position) Browser viewable area Little current

Locate the stack order Z-index

When using the positioning layout, there may be overlapping box elements. In this case, you can use the Z-index to control the order of boxes (the Z-axis).

Purpose: To process elements that are stacked together and separate them.

Note:

  • Values can be positive integers, negative integers, or0The default isautoThe higher the value, the more the box leans up
  • You can’t add units after numbers
  • Only if the box has a locationz-indexattribute

How do I use positioning to center the box?

Margin :0 auto horizontal center cannot be applied to boxes with absolute positioning, but the boxes can be horizontally and vertically centered using the following bit offset calculation method.

Initial location 👇

The original code

<style> body{ background-color: cornsilk; } .space_one{ background-color: aqua; height: 100px; width: 100px; } < / style > < body > < div class = "space_one '> square a < / div > < / body >Copy the code

After the middle 👇

Center the code

<style> body{ background-color: cornsilk; } .space_one{ background-color: aqua; height: 100px; width: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } < / style > < body > < div class = "space_one '> square a < / div > < / body >Copy the code