What is positioning?
location:
Set the box in a certain position, so positioning is also placing the box, and move the box according to the positioning method
Positioning = positioning mode + edge offset
Location mode is used to specify how an element is located in the document. The edge offset determines the final position of the element.
Edge offset
Edge offset is the movement of the positioned box to the final position. There are four attributes: top, bottom, left and right. The positioning box has edge offset to be valuable. Generally, where there is positioning, there must be edge offset.
| Edge offset attribute | Example | describe |
|---|---|---|
| top | top: 80px; | The top offset, which defines the distance of the element from the upper edge of its parent element. |
| bottom | bottom: 80px; | Bottom offset, which defines the distance of the element from the lower edge of its parent element. |
| left | left: 80px; | Left offset, which defines the distance of the element from the left line of its parent element. |
| right | right: 80px; | Right offset, which defines the distance of the element from the right line of its parent element |
Positioning mode - static positioning
Static positioning is the default positioning method of an element. It has no meaning of positioning. It is equivalent to none and static in the border. It is used when not positioning.
Syntax:
selector {
position: static;
}
characteristic:
- Static positioning is placed according to the standard flow characteristics, and it has no edge offset.
- We hardly use static positioning in layout
Positioning mode - relative positioning
Relative positioning is when an element moves its position, it is relative to its original position.
Syntax:
selector {
position: relative;
}
characteristic:
- It moves relative to its original position (the reference point is its original position when moving the position).
- The original position in the standard flow continues to be occupied, and the back box still treats it in the way of standard flow.
- The relative positioning is not off standard.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
position: relative;
left: 300px;
background-color: tomato;
}
.box2 {
width: 200px;
height: 200px;
background-color: violet;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2"></div>
</body>
</html>
Positioning mode - fixed positioning
Fixed positioning is the position where the element is fixed to the viewable area of the browser.
Main usage scenario: the position of elements will not change when the browser page scrolls
Syntax:
selector {
position: fixed;
}
characteristic:
-
Move the element with the browser's visual window as the reference point.
-
Fixed positioning does not occupy the original position.
-
Do not scroll with the scroll bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 10000px;
}
.box1 {
width: 200px;
height: 200px;
position: fixed;
right: 0px;
bottom: 0px;
background-color: tomato;
}
.box2 {
width: 200px;
height: 200px;
background-color: violet;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2"></div>
</body>
</html>
Positioning mode - absolute positioning
Absolute positioning is when an element moves its position, relative to its ancestor element.
Syntax:
selector {
position: absolute;
}
characteristic:
-
If there is no ancestor element or the ancestor element is not located, locate it based on the browser (document document).
-
If the ancestor element has positioning (relative, absolute and fixed positioning), take the nearest ancestor element with positioning as the reference point.
-
Absolute positioning no longer occupies its original position. Therefore, absolute positioning is divorced from the standard flow. (off bid)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grandfather {
margin: 50px auto;
width: 600px;
height: 600px;
background-color: violet;
}
.father {
width: 400px;
height: 400px;
background-color: turquoise;
}
.son {
width: 200px;
height: 200px;
background-color: teal;
position: absolute;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
.father {
position: relative;
width: 400px;
height: 400px;
background-color: turquoise;
}
.grandfather {
position: relative;
margin: 50px auto;
width: 600px;
height: 600px;
background-color: violet;
}
Positioning mode - viscous positioning
Viscous localization can be considered as a mixture of relative localization and fixed localization.
characteristic:
-
Move elements with the visual window of the browser as the reference point (fixed positioning feature)
-
Viscous positioning occupies the original position (relative positioning characteristics)
-
One of top, left, right and bottom must be added to be valid
-
Use with page scrolling. Poor compatibility, IE does not support.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 100%;
height: 10000px;
}
.aaa {
width: 100%;
height: 50px;
background-color: tomato;
margin: 200px 0px;
position: sticky;
/* Sticky positioning fixed positioning when the box is 0 pixels from the top */
top: 0px;
}
</style>
</head>
<body>
<div class="aaa"></div>
</body>
</html>
stack order
When using a positioning layout, boxes may overlap. At this point, you can use z-index to control the order of boxes (z-axis)
Syntax:
selector {
z-index: 1;
}
characteristic:
-
Attribute value: positive integer, negative integer or 0. The default value is 0. The larger the value, the higher the box;
-
If the attribute values are the same, the second comes first according to the writing order;
-
No unit can be added after the number.
-
z-index can only be applied to elements with relative positioning, absolute positioning and fixed positioning. Other standard flow, floating and static positioning are invalid.
After positioning, the box on which the mouse moves will be displayed at the top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
}
div:nth-child(1) {
left: 10px;
top: 10px;
background-color: tomato;
}
div:nth-child(2) {
left: 30px;
top: 30px;
background-color: teal;
}
div:nth-child(3) {
left: 50px;
top: 50px;
background-color: turquoise;
}
div:hover {
z-index: 3;
}
</style>
</head>
<body>
<div>I'm the first box</div>
<div>I'm the second box</div>
<div>I'm the third box</div>
</body>
</html>
