Home > Developer > Web Develop
This exercise is primarily a simple demonstration of the positioning and relative positioning of the data;
Here is the location of HTML:
1.static Positioning
This is the default way, and for static , left and right are not valid.
2.relative positioning (relative positioning)
The element box deviates from the position of its own flow (left and top positioned ), the element remains the shape before the position, and the space it originally occupies remains, from this point of view, as if the element is still in the document flow / the same as in the standard flow.
Note: The reference point of the relative is its original position, moving
3.absolute Positioning (absolute positioning)
The equivalent element from the original position, and let out their own space, the latter element will occupy the room.
Note: The absolute location is relative to the non-standard flow box closest to yourself.
4.fixed Positioning
The element box behaves like the position is set to absolute, but its containing block is the window itself.
Code:
HTML file (test5.html):
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title> Skiff </title><!--
/* Practice absolute positioning and relative positioning */
--><meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This is my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<link rel= "stylesheet" type= "Text/css" href= "./test5.css" >
<body>
<div class = "Class1" >
Relative positioning
<div class = "Style1" > This is the first square </div>
<div class = "Style1" id = "Style2" > This is the second square </div>
<div class = "Style1" > This third square </div>
<div class = "Style1" > This is the fourth square </div>
</div>
<div class = "Class1" >
Absolute positioning
<div class = "Style1" > This is the fifth square </div>
<div class = "Style1" id = "Style3" > This is the sixth square </div>
<div class = "Style1" > This seventh square </div>
<div class = "Style1" > This is the eighth square </div>
</div>
</body>
CSS file (test5.css):
. style1 {
width:100px;
height:70px;
background-color:red;
margin-top:12px;
margin-left:3px;
Float:left;
}
Body {
width:800px;
height:500px;
BORDER:2PX solid blue;
Background-color:green;
}
#style2 {
/* Use relative positioning */
position:relative;
left:110px;
top:90px;
}
Div.class1 {
width:700px;
height:200px;
border:1px solid Gray;
}
#style3 {
/* Use absolute positioning */
Position:absolute;
left:400px;
top:300px;
}
Run by:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
