1.定位：相对定位（position:relative）
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>我是标题</h2>
<h2 class="pos_left">我是标题向左移动</h2>
<h2 class="pos_right">我是标题向右移动</h2>
</body>
效果就是：
--------------------------------我是标题--------------------------------
-----------------------------我是标题向左移动------------------------
----------------------------------我是标题向右移动-------------------
2.绝对定位（position:absolute）
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">我是绝对定位的标题</h2>
</body>
</html>
效果：
·---------------------------------------------
·
·
· ·············我是绝对定位的标题
·
·
3.固定定位（position:fixed;）
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">我是1在这。</p>
<p class="two">我是2在这。</p>
</body>
</html>
效果：
·······我是1在这。
···········································································································我是2在这。
其他的根据padding和margin去控制、精确位置。
2410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
