CSS 3 types of positioning methods to control the layout of the page: general positioning, floating positioning, absolute positioning.
By default, normal streaming technology is used to layout elements in the page, hoping to behave differently than normal flow, with two other features position and float
Concrete examples
Copy Code code as follows:
<html>
<head>
<title>
CSS positioning function exploration
</title>
<style type= "Text/css" >
#relative {
/* Relative positioning exploration
will be positioned relative to its position in the normal stream
relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream.
relative positioning is the initial position of the "relative to" element in the document
*/
position:relative;
top: -10px;
left:30px;
color:red;
}
/*
the position of an absolutely positioned element relative to the nearest positioned ancestor element, if the element has no positioned ancestor element, its position is the body element relative to the original containing block
*/
#absolute1 {
Position:absolute;
top:20px;
left:360px;
Color:blue;
}
/*
has a parent element but the parent element is not positioned
*/
#absolute2 {
Position:absolute;
top:50px;
left:360px;
Color:blue;
}
/* property is the same as above
is just the way the parent element is positioned into relative
*/
#absolute3 {
Position:absolute;
top:50px;
left:360px;
Color:blue;
}
/* Position the element relative to the browser window * *
#fixed {
position:fixed;
top:90px;
left:80px;
}
/*float positioning is affected by the current layout and can also affect the server layout
For example in the General positioning 1 down before starting to float
General positioning 2 is directly connected to the floating position behind
*/
#float1 {
Float:left;
margin-left:50px;
}
#float2 {
Float:left;
margin-left:50px;
}
</style>
</head>
<body style= ' height:1000px; ' >
<div>
position value for relative location exploration 1
</div>
<div id= ' relative ' >
position value for relative location exploration 2
</div>
<div>
position value for absolute location Exploration 3
</div>
<div id= ' absolute1 ' >
position value for absolute location Exploration 4
</div>
<div style= ' margin-top:50px; ' >
This is the position value for absolute positioning Exploration 4 and 5 of the parent element
<div id= ' absolute2 ' >
position value for absolute location Exploration 4
</div>
<div>
position value for absolute location Exploration 5
</div>
</div>
<div style= ' margin-top:50px;position:relative; ' >
This is the position value for absolute positioning Exploration 6 and 7 of the parent element
<div id= ' absolute3 ' >
position value for absolute location exploration 6
</div>
<div>
position value for absolute location Exploration 7
</div>
</div>
<div style= ' margin-top:20px; ' >
This is position value for fixed position exploration 1
</div>
<div id= ' fixed ' >
This is position value for fixed position exploration 2
</div>
<div> This is a general positioning 1</div>
<div style= ' border:2px solid red; ' id= ' float1 ' > This is float location 1</div>
<div id= ' float2 ' style= ' border:2px solid red; ' > This is float positioning 2</div>
<div> This is a general positioning 2</div>
</body>
</html>
Run Effect:
