CSS positioning element can make you a precise place where you specified on the page.
absolute absolute positioning
From the home position to position
The following give an example of absolute positioning:
each put four boxes in the four corners of the document
html snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="absolute.css">
<title>绝对定位</title>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</body>
</html>
css code snippet
div{
width:100px;
height:100px;
text-align:center;
}
#box1{
position:absolute;
top:50px;
left:50px;
background-color: darkred;
}
#box2{
position:absolute;
top:50px;
right:50px;
background-color: orange;
}
#box3{
position: absolute;
bottom:50px;
left:50px;
background-color: yellow;
}
#box4{
position: absolute;
bottom: 50px;
right:50px;
background-color: green;
}
Renderings
relative Relative positioning
Retain the original position to position
Its position relative to the calculated from its original location in the document of. This means that, by the relative positioning of the elements from the original position to the right, left, up or down to locate. The relative positioning of the elements will be employed to obtain the corresponding space.
For example
We can position relative to the original three pictures on the page to the relative positioning of them. Note that these pictures will be left at their original location in the document space
html snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="absolute.css">
<title>相对定位</title>
</head>
<body>
<p>
<div id="dog1">
<img src="萌宠.jpg" alt="萌宠" titile="萌宠">
</div>
</p>
<p>
<div id="dog2">
<img src="萌宠.jpg" alt="萌宠" titile="萌宠">
</div>
</p>
<p>
<div id="dog3">
<img src="萌宠.jpg" alt="萌宠" titile="萌宠">
</div>
</p>
</body>
</html>
css code snippet
#dog1{
position:relative;
left:35px;
bottom:15px;
}
#dog2{
position:relative;
left:35px;
bottom:50px;
}
#dog3{
position: relative;
left:10px;
bottom:70px;
}
Renderings
