1. Three CSS layout mechanisms

At the heart of web layout is the use of CSS to position boxes.

The CSS provides three mechanisms for setting the placement of boxes: normal flow, float, and position.

  1. Normal flow (standard flow)

  2. floating

    • Float boxes from normal flow – arrange multiple boxes (divs) horizontally in a row.

  3. positioning

    • Positioning a box in a position to float on top of other boxes – CSS is dependent on positioning, especially the js effects behind it.

2. Why use positioning

Let’s look at one effect and wonder if we can achieve a similar effect with standard flow or float.

1. Small yellow blocks move across the picture to catch the user’s eye.

2. The box holds the screen in place as we scroll

Conclusion: Neither standard flow nor float is fast enough to achieve this effect

Place the box in a position to float freely on top of other boxes (both standard flow and float)

Therefore, we should have in mind the order of the three layout mechanisms

Standard flow at bottom (sea floor) ——- floating box at middle layer (sea surface) ——- positioned box at top layer (sky)

3. Detailed positioning

Positioning is also used for layout, which has two parts:

Position = position mode + edge offset

3.1 migration

In short, the box we are positioning is moved by edge offset.

In CSS, the edge offsets of elements are defined by the top, bottom, left, and right attributes :(azimuth noun)

Edge offset property The sample describe
top top: 80px At the topAn offset that defines an element relative to its parentThe distance from the top edge.
bottom bottom: 80px At the bottom of theAn offset that defines an element relative to its parentThe distance to the bottom edge.
left left: 80px On the left side of theAn offset that defines an element relative to its parentThe distance to the left.
right right: 80px On the right sideAn offset that defines an element relative to its parentThe distance to the right

A positioned box is only valuable if it has an edge offset. In general, any location must have an edge offset.

3.2. Position

In the CSS, the position property defines the positioning mode of an element. The syntax is as follows:

Selector {position: property value; }Copy the code

There are different classification of positioning modes, and we use different positioning modes in different situations.

value The semantic
static staticpositioning
relative The relativepositioning
absolute absolutepositioning
fixed fixedpositioning

3.2.1. Static Positioning

  • Static positioning is the default positioning of elements. It is equivalent to none in border and is not used when positioning.
  • Static positioning is positioned according to standard flow characteristics and has no edge offset.
  • Static positioning is rarely used in layout

3.2.2. Relative Position

  • Relative positioning is the position of an element relative to its original position in the standard flow. (Narcissistic)

Effect:

Relative positioning features :(be sure to remember)

  • Moving relative to one’s original position in the standard flow
  • The original area of the standard stream continues to be occupied, and the box behind it still treats it like the standard stream.

3.2.3 Absolute Positioning (Absolute)

Absolute positioning is when an element moves its position with a parent element with positioning.

  1. Completely off scale – completely out of position;

  2. If the parent element is not positioned, the browser is positioned (the Document Document).

  1. The parent element has a location

  • Positions an element according to its most recently positioned (absolute, fixed, or relative) parent element (ancestor).

Features of absolute positioning :(be sure to remember)

  • The location is definitely moved by the parent element with location (spelling). If neither parent has location, the browser document is used to move the location
  • Does not retain the original position, is completely off the mark.

Because the absolute positioning of the box is to fight the father, so it should be used together with the parent.

Positioning formula — the child must father phase

Just now we said that absolute positioning is used with the parent with positioning, so what positioning does the parent use?

Child absolute parent phase – the child is absolute positioning, the parent should use relative positioning.

The child must father phase is the use of absolute positioning formula, to firmly remember!

Question: in layout, why should parent elements use relative positioning when child elements use absolute positioning?

Look at the image below and think about the left and right arrow images and how the parent box is positioned in the layout.

Analysis:

  1. The direction arrow is superimposed on top of other images, and absolute positioning should be used because absolute positioning is completely off scale and does not occupy position at all.
  2. Parent boxes should use relative positioning, because relative positioning does not de-scale and subsequent boxes still treat it as a standard flow.
  • If the parent box also uses absolute positioning, it will be completely off scale, and the AD box below will move up, which is obviously not what we want.

Conclusion: the parent should occupy the position, and the child should be placed at will, which is the origin of the child’s absolute father phase.

Contrast with floating:

  • Absolute positioning: off scale, using edge offset to specify the exact position;
  • Float: Off-scale, unable to specify the exact location, allowing multiple block-level elements to be displayed on a single line.

3.2.4 Fixed Location

Fixed position is a special form of absolute position: if absolute position is a rectangle then fixed position is similar to a square

  1. Completely off scale – completely out of position;
  2. onlyThe browser’s visual window–Browser visual window + edge offset propertyTo set the position of the element;
    • It has nothing to do with the parent element; single-use
    • Does not scroll with the scroll bar.
  3. Fixed positioning application scenarios: fixed to a position in the browser visual window layout;

Note: Internet Explorer 6 and other earlier versions do not support fixed location.

Note:

  1. When using fixed and absolute positioning, you need to specify the width if there is no content in the box
  2. Set the top margin of the bottom content image so that the bottom box initially appears below the top image.
  3. Don’t use bothleft 和 rightAnd the edge offset property.

4. Extension of position

4.1 Absolutely positioned box is centered

Note: Absolute positioning/fixed positioning of the box cannot be set horizontally centered by setting Margin: Auto.

To achieve horizontal center when using absolute positioning, follow the following method:

  1. left: 50%;:The left side of the boxMove to theHorizontal center position of the parent element;
  2. margin-left: -100px;: let itTo the leftmobileHalf its own width.

4.2 Stack Sequence (Z-index)

When using a positioning layout, it is possible to have overlapping boxes.

If the box is positioned, the latecomer will overtake the box in front by default.

The z-Index hierarchy property can be used to adjust the stacking order of boxes. As shown below:

The z-index has the following features:

  1. Property value: positive integer, negative integer, or 0. The default value is 0. The higher the value, the closer the box is.
  2. If the attribute values are the same, they are written in the order of precedence.
  3. You can’t add units after numbers.

Note: Z-index can only be applied to relatively-positioned, absolutely positioned, and fixed-positioned elements. Other standard stream, float, and static positions are not valid.

4.3 Location Change the display attribute

As we said earlier, display is the display mode, and you can change the display mode in the following ways:

  • Inline-block can be converted to an inline block
  • You can convert a float to an inline block by default (similar, but not exactly the same, because floats are de-indexed)
  • Absolute and fixed positions are similar to floats in that the properties of the default transform are converted to inline blocks.

So, a box in a row, if you add float, fixed position and absolute position, the box can be directly set width and height, etc., without conversion.

Also note:

Float elements, absolute positioning (fixed positioning) elements do not trigger margin merging. (We used to use the padding border overflow solution)

That is, if we change the box to float or position, we won’t have the problem of vertical margin merging.

5. Positioning summary

Positioning mode Whether off-label occupies the position Moving position reference Pattern conversion (inline blocks) usage
Static static No deviation, normal mode Normal mode Can’t Almost no
Relative positioning Not off – scale, occupy the position Moving relative to itself Can’t Basically alone
Absolute positioning Completely off scale, no position occupied Move position relative to location parent can Use with the location parent element
Fixed position Completely off scale, no position occupied Move position relative to the browser can Used alone, no parent is required

Note:

  1. Edge offset needs to be used together with positioning mode.
  2. top 和 bottomDon’t use both at the same time;
  3. left 和 rightDon’t use both.

6. Summary of web page layout

A complete web page, with standard flow, float, positioning together complete layout. Each has its own special usage.

6.1. The standard flow

Boxes can be arranged up and down or left to right

6.2. The floating

You can display multiple block-level elements in a row or align boxes left and right. Floating boxes are arranged left and right in order

6.3 positioning

The biggest feature of positioning is the concept of stacking, that is, multiple boxes can be stacked before and after the display. But each box needs to be measured.