1、新建一个html文件输入两个div标签，接着使用style属性，分别给div设置为绝对定位absolute和相对定位relative，让他们其中全部向左移动20px，向上移动30px的距离：
2、然后保存文件打开浏览器看看效果，位置显示还是比较明显的：
3、最后解释下这个结果，绝对位置就是对浏览器页面左边和顶部的距离，相对位置就是距离正常的标题的距离。以上就是css中绝对定位和相对定位的使用方法：
我刚复制了一下，这代码在ie6和搜狗2.0运行的结果是一致的没有出现什么问题，文字熟知的方法有以下几种：（复制来的）
第一种方式输出：（代码）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.wrap{float:leftwidth:14pxbackground:#ccc}
.wrap2{float:leftwidth:14pxbackground:#eee}
</style>
</head>
<body>
<div class="wrap">
我们回不去了吗
</div>
<div class="wrap2">
我们还是朋友
</div>
</body>
</html>
效果图：
第二种方式输出：（代码）
<!DOCTYPE html >
<html >
<body>
<div style="writing-mode:tb-rltext-align:leftborder:1px solid red">
writing-mode设置或检索对象的内容块固有的书写方向。
此属性将影响text-align属性与vertical-align属性的作用。
对应的脚本特性为writingMode。
</div>
<br />
<div style="layout-flow:vertical-ideographictext-align:rightborder:1px solid green">
layout-flow设置或检索对象内文本的流动和方向。
此属性将影响text-align属性与vertical-align属性的作用。
对应的脚本特性为layoutFlow。
</div>
</body>
</html>
第三种方式输出：（代码）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
</head>
<body>
<div>
我
们
回
不
去
了</div>
<pre>
我
们
回
不
去
了
吗</pre>
</div>
</body>
</html>
