Positioning of CSS Foundation
Positioning is to tell a label where to go.
1, Static positioning:
Static positioning is actually the browser's default layout, that is, standard flow. Web pages are statically positioned by default
Code: position:static
2, Relative positioning:
Relative positioning is relative to your original position. In fact, it is a bit like margin.
Code: position: relative
Note: you need to cooperate with the azimuth to move, that is, the top, bottom, left and right azimuth. There is no deviation from the standard flow in the page, and its original position is still there.
Take chestnuts for example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB 2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.position{
position: relative;
top: 100px;
left: 50px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="position"> </div>
<p>Test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test Test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test Positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning</p>
</body>
</html>
effect:
3, Absolute positioning
Absolute positioning will find the positioned parent from inside to outside, and then locate it relative to the positioned parent,
If there is no default, move according to the viewable area of the browser.
Note: the absolute positioning has been de labeled. If the standard flow is regarded as the first parallel universe, the label using absolute positioning has flown out of the three worlds. The above-mentioned relative positioning can be imagined as the soul out of the body, but the body itself is still meditating on the ground. Moreover, when absolute positioning is used, the label will become in-line block mode.
Take chestnuts for example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB 2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.position{
position: absolute;
top: 100px;
left: 50px;
/* width: 200px; */
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="position">adsfasdfasdfasdfsd </div>
<p>Test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test Test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test Positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning test positioning</p>
</body>
</html>
The effect is as follows: here, div is expanded according to the content. If you don't give the content, there will be no width. It has become an inline block label.
4, General collocation method: child Jue parent phase (absolute positioning is used for child elements and relative positioning is used for parent elements)
However, if the parent element already has positioning, don't modify the positioning method of the parent element, and don't take off your pants and fart.
The child Jue Fu phase can also achieve the centering effect:
Let the label come to the centerline of the parent label, and then move itself half a body position horizontally to the left and vertically upward.
If you don't say much, go straight to the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB 2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
position: relative;
width: 600px;
height: 600px;
background-color: green;
}
.son{
position: absolute;
left: 50%;
top: 50%;
//Retract 50% horizontally and 50% vertically
transform: translate(-50% ,-50%);
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
5, Fixed positioning
Fixed positioning only moves relative to the browser. There is a fixed rolling advertisement on the edge of many web pages, which is realized in that way.
Code: position:fixed
6, Summary:
In the web page layout level: standard flow < floating < positioning. If all positioning requires hierarchical relationship, you can set the level by adding z-index and number. The larger the number, the higher the level.
