Basic knowledge of CSS positioning

Posted Jun 28, 20206 min read

What you deliberately find is often not found.

Everything in the world comes and goes, it has its time.

Simple general positioning:fix the box in a certain position and float freely on top of other boxes(including standard flow and float).

Therefore, three layout mechanisms can be presented:the standard flow is at the bottom layer, the floating box is at the middle layer, and the positioning box is at the top layer. In the middle layer of the box, the uppermost layer of the positioned box.

Detailed positioning

Syntax:positioning = positioning mode + edge offset

Edge offset

In CSS, the edge offset of an element is defined by the top, bottom, left, and right attributes, which is simply the four directions of up, down, left, and right ?

Edge Offset Properties Examples Description
top top:80px Topoffset, which defines the distance of the element relative to its parent upper edge.
bottom bottom:80px Bottom Offset, defines the distance of the element relative to its parent element's bottom line.
left left:80px leftoffset, defines the distance of the element relative to its parent left line.
right right:80px Offset on the right side, defines the distance of the element relative to its parent element on the right line

Positioned boxes are only valuable if they have an edge offset. In general, there must be an edge offset at any location.

Positioning mode

In CSS, the positioning mode of an element is defined by the position attribute, which is the classification of positioning. Very important to master

Selector {position:attribute value;}

There are different classifications of positioning modes. In different situations, we use different positioning modes.

Value Semantics
static Static positioning(default)
relative relative positioning
absolute Absolute Positioning
fixed fixed positioning

Relative positioning(relative) very important

Relative positioning is where the element moves relative to its original position in the standard stream.

Relative positioning features:

  1. Moved relative to his original position in the standard stream.
  2. The positioned box originally occupied the area in the standard stream, and the boxes behind it still treated him in the standard stream.

Absolute positioning is very important

Absolute positioning is where the element moves with the parent element with positioning
Absolute positioning features:

  1. No place at all
  2. Position based on the most recently positioned parent element(absolute, fixed, or relative).
  3. If the parent element is not positioned, the browser is used as the standard positioning

As shown in the figure, the parent element has a relative positioning mode, which sets an absolute positioning for the child element. At this time, the child box will be positioned with the upper left corner of the parent as the standard point.

As shown in the following figure, when the parent element is not positioned, set an absolute positioning for the child element, and the child box will be positioned based on the document, that is, the browser. Note that the parent element here not only refers to the parent element of the child element, it will look up the element of the first level. If the parent element is positioned at the upper level, the grandfather element shall prevail.

Summary:Position the element according to the most recently positioned(absolute, fixed or relative positioning) parent element.

Fixed positioning very important

Fixed positioning is a special form of absolute positioning

Fixed positioning features:

  1. No position at all
  2. Recognize only the browser's visual window, has nothing to do with the parent element, and does not scroll with the scroll bar

Absolute positioning box centered and aligned

Absolutely positioned boxes cannot be centered horizontally with margin:0 auto.

Here is a simple calculation formula to center the absolutely positioned box horizontally. We first move the box 50%to the left. At this time, we will find that the moving position is too much, and the length is the average of the box, then we need to subtract For half the length of the box, you can set margin-left to a negative number. The value of the negative number is equal to half the width of the box.

We can practice it:
Set a position for the parent element box:relative, set the absolute positioning for the box that needs to be centered, left is equal to 50%, and margin-left is equal to-half the width of the box.

Absolutely positioning the box vertically and horizontally centering hin important

?The above is mainly a detailed explanation of the absolute positioning horizontal centering, and then a detailed explanation of the absolute positioning vertical horizontal centering and the centering of other positions through a picture:

Let's look at this picture first. The entire black border is a large box with a length of 800px and a height of 400px. The example box has a width of 200px and a height of 100px. The upper and lower boxes are horizontally centered, the left and right boxes are vertically centered, and horizontally centered. The principle is the same.

Focus is coming, we usually use the vertical and horizontal centering, after setting the absolute positioning of the box, set:left:50%, top:50%, then you will find that the box is more offset to the right from the middle position The width is half, and the offset is more than half of the height, so it needs to be subtracted. Give the box a margin:-50px -100px; the specific code example is as follows ?:

Stacking order

When using positioning layout, there may be cases of overlapping boxes.

The positioning box is added. By default, the latecomer comes first . The back box will press the front box.

Using the z-index cascade level attribute can adjust the stacking order of boxes. As shown below:

The characteristics of z-index are as follows:

  1. Attribute value:positive integer, negative integer or 0, the default value is 0, the larger the value, the higher the box;
  2. If the attribute values are the same, follow the writing order, and then come up first;
  3. No unit can be added after the number.

Note:z-index can only be applied to elements of relative positioning, absolute positioning and fixed positioning, other standard stream, floating and static positioning are invalid.

Positioning changes display attributes

Previous article: CSS Basics has mentioned several ways to change the display mode:

  1. Use display:inline-block to convert to inline block elements
  2. Use floating float to convert into inline block element by default, then the width of the element content is the width of the box, similar to Ha
  3. Another thing is that the absolute positioning and fixed positioning that we will cover next will also be converted to inline block elements by default. Many positioning boxes need to be written separately.

There is a small detail here, for example, we need to set a fixed positioning for a navigation bar, then we know that fixed positioning does not occupy the position, so the following standard stream content will be covered by the fixed navigation bar, and the normal document flow cannot be seen At this time, we only need to set a margin-top for the normal document flow, and the value is equal to the height of the navigation bar. `

Positioning and collapse(solution to collapse)

As we mentioned before, when the margin value is set for a child element inside a parent element, the parent element may also change, that is, the outer margin merge is commonly referred to as collapse, but absolute positioning and floating will not Trigger the outer margin merge?:

What is collapse

Why does it collapse? Only the father and son elements will collapse. The following will explain in detail. It is very important to understand. Only when you understand the reason will you naturally think of his solution.

Reason:In the standard document flow, the margins in the vertical direction will appear superimposed(the horizontal direction will not collapse), the two margins are close to each other, and there is no border or padding in the middle. When the two margins are in direct contact, There is a merger, that is, the outer margin is merged. The larger margin will cover the smaller margin. There is only one larger margin between the two boxes in the vertical direction. This is the phenomenon of margin collapse.

Collapsed objects

  1. The box of brotherhood
  2. The box of parent-child relationship
Solution to collapse

Here are a summary of seven solutions, you need to select the appropriate solution according to the requirements of the project

This small project is only the positioning structure of the carousel picture, and does not realize the corresponding function. It is the comprehensive use of this article