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去控制、精確位置。