Fixed positioning: always positioned relative to the browser window
Purpose: loading to load the page, waiting for the network to load
<html>
<head>
<title>定位方式-固定定位</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 2000px;
}
div{
display：none;
position: fixed;/*设置定位方式为固定定位*/
bottom:0;
top:0;
left:0;
right:0;
}
</style>
</head>
<body>
<div>这是一个div盒子</div><br>
</body>
</html>Relative positioning: Refer to the original position of the label, the original position is retained
Purpose: The son is absolutely the father, to prevent the son from leaving the document flow
<html>
<head>
<title>定位方式-相对定位</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 2000px;
}
#span2{
position: relative;/*设置定位方式为相对定位*/
top: 20px;
left: 14px;
}
</style>
</head>
<body>
<span id="span1">这是一个</span>
<span id="span2">这是一个</span>
<span id="span3">这是一个</span>
</body>
</html>Absolute positioning: The position of the element is relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, then its position is relative to the original containing block-body
Purpose: out of the document
<head>
<title>定位方式-绝对定位</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 500px;
height: 400px;
position: relative;
}
.zi {
width: 50px;
height: 40px;
background-color: yellow;
position: absolute;/*设置定位方式为绝对定位*/
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div>
<div class="zi"></div>
</div>
</body>