positioning

1.1 Why positioning is needed

1. Floating allows multiple block-level boxes to be displayed in a row without gaps, often used to horizontally align boxes. 2. Positioning allows the box to move freely within a box or fix a certain position on the screen, and press other boxes.

1.2 Positioning Composition

Positioning: the box is fixed in a certain position, so positioning is also placing the box, according to the positioning of the way to move the box

Position = position mode + edge offset

Positioning mode is used to specify how an element is positioned in a document. The edge offset determines the final position of the element.

1. Positioning mode The positioning mode determines the positioning mode of an element. It is set by the POSITION property of the CSS and can be divided into four values:

value The semantic
static Static positioning
relative Relative positioning
absolute Absolute positioning
fixed Fixed position

2. Side offset Side offset is the positioning of the box to the final position. We have top, bottom, left and right.

Edge offset property The sample describe
top top:80px The top offset, which defines the distance of an element relative to the upper edge of its parent
bottom bottom:80px Bottom offset, which defines the distance of an element relative to the edge below its parent
left left:80px The left offset, which defines the distance of an element from the left line of its parent element
right right:80px The right offset that defines the distance of an element from the right line of its parent element

1.3 Static Positioning

Static positioning is the default positioning of elements.

The selector {position:static; }Copy the code
  • Static positioning is positioned according to standard flow characteristics and has no edge offset
  • Static positioning is rarely used in layout

1.4 Relative positioning (Important)

Relative positioning is when an element moves its position relative to its original position.

The selector {position:relative; }Copy the code

The characteristics of relative positioning :(do remember) 1. It is relative to its original position to move (when moving position reference point is their original position). 2. It continues to occupy its place in the standard stream, and the box behind it still treats it as the standard stream. Therefore, the relative positioning does not de-scale. Its most typical application is to absolute positioning as father,,,,

1.5 Absolute Positioning Absolute (Critical)

Absolute positioning is when an element moves relative to its ancestors:

The selector {position:absolute; }Copy the code

Absolute positioning features :(remember) 1, if there is no ancestor element or the ancestor element is not positioned, the browser is positioned (DOCUment DOCUment) 2, if the ancestor element is positioned (relative, absolute, fixed positioning), Then, the reference point of the element with positioned ancestor of the nearest level is moved to position 3, and the absolute position no longer occupies the original position (off-scaling).

1.6 The origin of the father phase

This “son must father phase” is so important, it is the formula we learn positioning, is the most common way of positioning. This sentence means: if the child is absolute positioning, the father should use relative positioning.

  • The parent is absolutely positioned, does not occupy the location, can be placed in any place inside the parent box, does not affect other sibling boxes.
  • The parent box needs to be positioned to restrict the child box display within the parent box.
  • When the parent box is laid out, it needs to occupy the position, so the parent can only be positioned relative.

This is the origin of the absolute parent, so relative orientation is often used as the parent of absolute orientation. Conclusion: Because the parent needs to occupy the position, it is relative positioning, the child box does not need to occupy the position, then it is absolute positioning. Of course, the child absolute parent phase is not constant, if the parent element does not need to occupy the position, the child absolute parent will also encounter.

1.7 Fixed Positioning (Important)

Fixed positioning is where the element is fixed in the browser’s viewable area. Main usage scenario: the position of elements can not change while the browser page is scrolling.

Grammar:

The selector {position:fixed; }Copy the code

Fixed positioning features :(keep in mind) 1, move elements with the browser’s visual window as the reference point

  • It has nothing to do with the parent element
  • Does not scroll with the scroll bar

2, fixed positioning does not occupy the original position. Fixed positioning is also off target, in fact, fixed positioning can also be regarded as a special absolute positioning.

Fixed positioning tips: fixed on the right side of the center

Small algorithm: 1, make the fixed position of the box left:50%, go to the browser viewable area (also known as the layout center) half position. 2, let the fixed positioning of the box margin-left: half of the width of the type center distance, more than half of the width of the type center position, you can let the fixed positioning of the box with the right side of the type center aligned.

Code:

<! DOCTYPEhtml>
<html>
<head>
	<title></title>
	<style type="text/css">
		.w {
			width: 800px;
			height: 1400px;
			margin: 0 auto;
			background-color: pink;
		}
		.fixed {
			position: fixed;
			/*1, go half the width of the browser */
			left: 50%;
			/*2, take half of the layout center box, you can add more px*/ if you want to make it wider
			margin-left: 400px;
			width: 50px;
			height: 150px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="fixed">
		
	</div>
	<div class="w">Type area box</div>
</body>
</html>
Copy the code

1.8 Sticky positioning (Understand)

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

Grammar:

The selector {position:sticky;top:10px; }Copy the code

Characteristics of sticky positioning: 1, the browser visual window as a reference point to move elements (fixed positioning characteristics) 2, sticky positioning occupy the original position (relative positioning characteristics) 3, must add top, left, right, bottom one of the effective, when beyond the set distance, it becomes fixed positioning 4,IE compatibility is very poor, less use

1.9 Summary of positioning

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 Current phase less

1.10 Locate the stacked order Z-index

When using a positioning layout, it is possible to have overlapping boxes. At this point, you can use the Z-Index to control the order of the boxes (z-axis)

Grammar:

The selector {z-index:1; }Copy the code
  • The value can be a positive integer, a negative integer, or 0. By default, auto, the higher the value, the closer the box is
  • If the attribute values are the same, they are written in the order of precedence
  • You can’t add units after numbers
  • Only positioned boxes have the Z-index attribute

1.11 Expansion of positioning

Margin: 0 auto Margin: 0 auto margin: 0 auto margin: 0 Auto margin

  • left:50%; Move the left side of the box to the horizontal center of the parent element
  • Margin – left: – 100 px; : Move the box half its width to the left

1. Add absolute or fixed positioning to the line element, and you can directly set the height and width. 2. Add absolute or fixed positioning to block-level elements. If no width or width is given, the default size is the content size. 3. Off-label values do not trigger margin collapse float elements, and absolutely positioned (fixed positioned) elements do not cause margin merge problems