html部分
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>css定位</title>
<link rel=”stylesheet” href=”2.css”>
</head>
<body>
<h1>定位：相對定位</h1>
<p>我是個俗氣至頂的人，見山是山，見海是海，見花便是花。</p>
<p1>我是個俗氣至頂的人，見山是山，見海是海，見花便是花。</p1>
<p>唯獨見了你，雲海開始翻湧，江潮開始澎湃，昆蟲的小觸鬚撓著全世界的癢。</p>
<p2>唯獨見了你，雲海開始翻湧，江潮開始澎湃，昆蟲的小觸鬚撓著全世界的癢。</p2>
<p>你無需開口，我和天地萬物便通通奔向你。</p>
<p3>你無需開口，我和天地萬物便通通奔向你。</p3><br>
<img src=”2.jpg” width=”450″ height=”312″>
<h2>定位：絕對定位</h2>
<p>我是個俗氣至頂的人，見山是山，見海是海，見花便是花。</p>
<p4>我是個俗氣至頂的人，見山是山，見海是海，見花便是花。</p4>
<p>唯獨見了你，雲海開始翻湧，江潮開始澎湃，昆蟲的小觸鬚撓著全世界的癢。</p>
<p5>唯獨見了你，雲海開始翻湧，江潮開始澎湃，昆蟲的小觸鬚撓著全世界的癢。</p5>
<p>你無需開口，我和天地萬物便通通奔向你。</p>
<p6>你無需開口，我和天地萬物便通通奔向你。</p6><br>
<h3>定位：絕對定位</h3>
<p>我是個俗氣至頂的人，見山是山，見海是海，見花便是花。</p>
<p7>我是個俗氣至頂的人，見山是山，見海是海，見花便是花。</p7>
<p>唯獨見了你，雲海開始翻湧，江潮開始澎湃，昆蟲的小觸鬚撓著全世界的癢。</p>
<p8>唯獨見了你，雲海開始翻湧，江潮開始澎湃，昆蟲的小觸鬚撓著全世界的癢。</p8>
<p>你無需開口，我和天地萬物便通通奔向你。</p>
<p9>你無需開口，我和天地萬物便通通奔向你。</p9><br>
</body>
</html>
css部分
p1
{
color:red;
}
p2
{
color:red;
}
p3
{
color:red;
}
p4
{
color:red;
}
p5
{
color:red;
}
p6
{
color:red;
}
p7
{
color:red;
}
p8
{
color:red;
}
p9
{
color:red;
}
p2
{
position:relative;
left:-20px
}
p3
{
position:relative;
left:20px
}
h2
{
font-size:35px;
}
p4
{
position:absolute;
left:20px;
top:730px
}p5
{
position:absolute;
left:-20px;
top:765px
}
p6
{
position:absolute;
left:40px;
top:805px
}
p7
{
position:fixed;
right:5px;
top:200px;
}
p8
{
position:fixed;
right:5px;
top:300px;
}
p9
{
position:fixed;
right:5px;
top:400px;
}