The idea of positioning: allows us to override the basic behavior of the basic document flow
- Static positioning: position:static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位</title>
<style>
.positioned{
position: static;
background: blue;
}
</style>
</head>
<body>
<p class="positioned">Lor officia deserunt mollit anim id est laborum.</p>
</body>
</html>
With or without css, the effect has no change except for the color change! So you can know: static positioning is the default behavior !
- Relative positioning: It is very similar to static positioning and occupies the normal document flow, except you can still modify its final position, including making it overlap other elements on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位</title>
<style>
.positioned{
position: relative;
background: blue;
top:30px;
left:30px;
}
</style>
</head>
<body>
<p class="positioned">Lor officia deserunt mollit anim id est laborum.</p>
</body>
</html>
There is relative positioning, (relative to the default). There must be one of left, right, top, bottom .
The way relative positioning works - you need to account for an invisible force that pushes on one side of the positioned box, moving it the opposite direction. So for example, if you specify top: 30px; a force pushes the top of the box, causing it to move down 30px.
- Absolute positioning: Absolutely positioned elements no longer exist in the normal document layout flow. Instead, it sits on its own layer independent of everything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位</title>
<style>
.positioned{
position: absolute;
background: blue;
top:30px;
left:30px;
}
</style>
</head>
<body>
<p class="positioned">Lor officia deserunt mollit anim id est laborum.</p>
</body>
</html>
top, bottom, left and right are positioned absolutely differently. They specify how far the element should be from each containing edge, not the direction in which the element should move. So in this case, we say absolutely positioned elements should be positioned 30px from the top of the "containing element" and 30px from the left.
- Fixed positioning:
This works exactly the same way as absolute positioning, with one major difference - absolute positioning fixed elements are relative to the element or its nearest positioned ancestor, whereas fixed positioning fixed elements are relative to the browser viewport itself. This means you can create fixed useful UI items like persistent navigation menus.
- z-index
The z-index value affects where positioned elements lie on this axis - positive values move them up the stack, negative values move them down the stack. By default, positioned elements all have a z-index of auto, which is actually 0.
position: sticky:
There is a new positioning value available called position: sticky, which is not yet widely supported. This is basically a mix between relative position and fixed position, which allows a positioned element to behave as if it was positioned relative until it scrolls to a certain threshold point (eg, 10 pixels from the top of the viewport), after which it becomes fixed.
Reference documentation: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/%E5%AE%9A%E4%BD%8D